vue

一、vue起步

1.1 引入

1. script 引入

<script src="../js/vue.js">

2. CDN

3. NPM

i.项目根目录下运行npm install vue

ii.

<script src="./node_modules/vue/dist/vue.js">

1.2 创建实例化对象

//如果template中定义了内容，优先加载template；如果没有，加载#app的模板。

//数据发生改变时，视图发生改变，简言之，数据驱动视图
var data={
    //数据属性
    //既可以是一个对象也可以是一个函数
    msg:'黄瓜'

}
var vm=new Vue({
    el:'#app',
    data:data
    template：`<div>{{msg}}</div>`
})

除了数据属性，vue实例还暴露了一些有用的实例属性和方法。他们都有前缀$

二、模板语法

1. 双大括号插值
2. v-text——元素的innerText属性；
3. v-html——元素的innerHtml；
4. v-bind——绑定属性；（:）
5. v-if——判断是否插入这个元素，相当于元素的销毁和创建；
6. v-for——循环输出；
7. v-on——绑定事件；（@）
8. v-show——隐藏元素，会给元素的style加上display:none;
9. v-model——双向数据绑定；