• Vue是一套前端框架，可以免除原生JavaScript中的DOM操作，简化书写。
• 基于MVVM(MOdel-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放到数据上面。

Vue快速入门

1.新建HTML页面，引入Vue.js文件

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

2.在js代码区域，创建Vue核心对象，定义数据模型

<script>
    new Vue({
        el: "#app",
        data: {
            message: "Hello Vue!"
        }
    })
</script>

3.编写视图

<div id="app">
    <input type="text" v-model="message">
    {{ message }}
</div>

(注意： 插值表达式的形式：{{表达式}},表达式的内容可以是：变量、三元运算符、函数调用、算术运算)

Vue常用指令：

• 指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不一样的含义，例如v-if，v-for…
• 常用指令：

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

Example1：

<script>
  new Vue({
     el: "#app",
     data: {
        url: "https://www.itcast.cn"
     }
  })
</script>
//通过v-bind或者v-model绑定的变量，必须在数据模型中声明。

上述代码使用v-bind和v-model指令：

//v-bind
<a v-bind:href="url">传智教育</a>
<a :href="url">传智教育</a>

//v-model
<input type="text" v-model="url">

Example2:

<script>
    new Vue({
        el: "#app",
        data: {
	//...
        },
        methods: {
            handle:function(){
                alert('我被点击了');
            }
        },
    })
</script>

//v-on指令
<input type="button" value="按钮" v-on:click="handle()">
<input type="button" value="按钮" @click="handle()">

Example3：

//v-if和v-else-if和v-else指令：
年龄{{age}},经判定为:
<span v-if="age <= 35">年轻人</span>
<span v-else-if="age > 35 && age < 60">中年人</span>
<span v-else>老年人</span>

//v-show指令：
年龄{{age}},经判定为:
<span v-show="age <= 35">年轻人</span>

（v-show和v-if效果一样，只不过v-if指令在条件不满足时不渲染，而v-show指令是渲染之后根据display判断是否显示）

Example4:

data: {
   . . .
   addrs: ['北京','上海','广州','深圳','成都','杭州']
},

<div v-for="addr in addrs">{{addr}}</div>
<div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>