一：认识
这是一个渐进式的js框架，所谓渐进式就是只我们不用讲vue内容整体全部把控，学习一点就可以用一点。
这是一个非常简单且很优秀的js框架，它采用的是mvvm双向绑定模式。
mvvm模式就是指modelAndView viewAndModel,当view一旦发生改变。viewModel就可以监听到，model就可以进行更改，然后又会被监听到，view也进行响应的改变，实现双向绑定。
二：入门
首先在官网下载vue.js
1.引入
1 <!--引入vue 用相对路径--> 2 <script src="vue/vue.js"></script>
2.准备挂载的标签
1 <div id="app"></div>
3.创建vue对象
el:元素的挂载(id,class,标签：建议使用id),只有挂载的元素才能使用表达式这些
data:数据(vue对象的所有数据都写在这里)
methods:vue对象的方法(可以有多个)
this指的就是这个vue对象,js与表达式中都可以调用这个方法
1 <!--创建vue对象--> 2 <script> 3 var app=new Vue({ 4 el:"#app" , //挂载 可以使id class 标签 5 data:{ //数据 可以是变量 对象 数组 6 message:"愚人节快乐", 7 student:{ //可以用对象 8 name:"苏苏", 9 age:18 10 }, 11 arr:["你","好"] //可以用数组 12 }, 13 methods:{ //方法 记着这里有s 14 say(msg){ 15 return this.student.name+msg 16 } 17 } 18 }); 19 </script>
4.在挂载的标签中取值
表达式 {{vue对象中的属性}}
1 <div id="app"> 2 {{message}}==== 3 {{student.name}}==== 4 {{arr[0]}}{{arr[1]}}==== 5 {{say("愚人节快乐")}} 6 </div>
结果输出
愚人节快乐==== 苏苏==== 你好==== 苏苏愚人节快乐
三、表达式
1.表达式 {{vue对象中的属性}}
2.加减乘除（当操作的字符串时，加编程字符串的拼接，减乘除不变）、三目运算、对象操作、数组操作、还可以调用方法
1 <div id="app"> 2 {{employee.name}}=== 3 {{num1+num2}}=== 4 {{num1+num3}}=== <!--字符串拼接--> 5 {{sex?"男":"女"}}=== 6 {{arr[0]}} 7 </div> 8 <script> 9 // 对象操作准备 10 employee={ 11 name:"春天", 12 age:18 13 } 14 // 数组操作准备 15 arr=["张","三"] 16 //创建vue对象 17 new Vue({ 18 el:"#app",//挂载 19 data:{ 20 employee:employee, 21 num1:8, 22 num2:5, 23 num3:"6", 24 sex:true, 25 arr:arr 26 } 27 }) 28 </script>
3.结果
春天=== 13=== 86=== 男=== 张
四：指令
vue指定的一些特殊的属性 : v-属性名
1.v-text:直接展示,不会解析标签
2.v-html:直接展示(解析html标签)
3.v-for:循环(数组,对象,数字,字符串)
v:值 i:下标 k:属性名
v-for="(v,i) in 数组"
v-for="(v,k,i) in 对象"
4.v-show:有内容，只是隐藏(display="none")
5.v-if:不满足条件的直接就没有了
v-else-if=""
v-else
1 <div id="app1" v-text="textArl"></div> 2 <hr/> 3 <div id="app2" v-html="htmlArl"></div> 4 <hr/> 5 <div id="app3" v-show="showArl">有没有</div> 6 <hr/> 7 <div id="app" > 8 <div v-if="age<19">小于19</div><!--不满足就是真的没有div--> 9 <div v-else-if="age>=19 && age<56">诶</div> 10 <div v-else>大于</div> 11 </div> 12 <script> 13 new Vue({ 14 el:"#app", 15 data:{ 16 textArl:"<h1>这是文本</h1>",//没有解析标签 17 htmlArl:"<h1>这是文本</h1>",//解析了标签 18 showArl:false,//不是真正的没有，只是隐藏了 19 age:19 20 } 21 }) 22 </script>
6.v-bind:绑定属性(属性中使用vue的表达式)
标准写法: <img v-bind:src="src" />
简写形式(建议): <img :src="src" />
绑定对象属性: <img v-bind="img" />
1 <div id="app"> 2 <!--标准格式--> 3 <img v-bind:src="src" v-bind:alt="alt" > 4 <!--简便格式--> 5 <img :src="src" :alt="alt" > 6 <!--操作对象--> 7 <img v-bind="imgs"/> 8 </div> 9 <script> 10 new Vue({ 11 el:"#app", 12 data: { 13 src: "img/s1.png", 14 alt: "没有啊", 15 imgs:{ 16 src:"img/s1.png", 17 alt: "没有啊", 18 } 19 } 20 }) 21 </script>
7.v-model:双向绑定(只能用到input,select,textarea中)
1 <div id="app"> 2 <input type="radio" name="sex" v-model="sex" value="true"/>男 3 <input type="radio" name="sex" v-model="sex" value="false"/>女 4 {{sex}} 5 <hr/> 6 <input type="checkbox" v-model="hobbys" value="1"/>篮球 7 <input type="checkbox" v-model="hobbys" value="2"/>足球 8 <input type="checkbox" v-model="hobbys" value="3"/>排球 9 <input type="checkbox" v-model="hobbys" value="4"/>棒球 10 {{hobbys}} 11 <hr/> 12 <textarea v-model="textArea"></textarea> 13 {{textArea}} 14 <hr/> 15 <select v-model="city"> 16 <option value="1">ss</option> 17 <option value="2">ww</option> 18 </select> 19 {{city}} 20 <hr/> 21 <select >//v-for和v-bind结合 22 <option v-for="v in citys" :value="v.id">{{v.name}}</option> 23 </select> 24 <hr/> 25 </div> 26 <script> 27 new Vue({ 28 el:"#app", 29 data:{ 30 sex:false, 31 hobbys:[1,4], 32 textArea:"愚人节快乐", 33 city:"1", 34 citys:[{id:1,name:"ww"},{id:2,name:"ss"},{id:3,name:"爱琴海"}], 35 } 36 }) 37 </script>
8.v-on:事件绑定
<input type="button" v-on:click="say()" />
<input type="button" v-on:click="say" />
简写形式:
<input type="button" @click="say" />
1 <div id="app"> 2 <!--<input type="button" value="点我" v-on:click="say">--> 3 <!--<input type="button" value="点我" v-on:click="say()">--> 4 <input type="button" value="点我" @click="say"> 5 </div> 6 <script> 7 new Vue({ 8 el:"#app", 9 data:{}, 10 methods: { 11 say() { 12 alert(0) 13 } 14 } 15 }) 16 </script>
五、组件（自定义标签）
格式 组件名+模块
1.全局组件
1 Vue.component("mytag",{ 2 template:"<h1>自定义全局标签</h1>" 3 }) 4 5 new Vue({ 6 el:"#app", 7 })
2.局部组件
1 <div id="app"> 2 <mytag></mytag> 3 </div> 4 <script> 5 new Vue({ 6 el:"#app", 7 components:{ 8 mytag:{ 9 template:"<h2>这是一个局部标签</h2>" 10 } 11 } 12 }) 13 </script>
3.注意事项
1.先定义组件，再挂载
2.组件的模板必需要一个根标签
3.命名如果是驼峰(建议小写) myTag -> <my-tag>
原文：https://www.cnblogs.com/guangbin0125/p/10640117.html