Vue框架
Posted xuechengeng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue框架相关的知识，希望对你有一定的参考价值。
一.导读：
1.什么是Vue
Vue.js是一个渐进式javascript框架
渐进式：vue从小到控制页面中的一个变量到页面一块内容到整个页面，最终大到整个项目，都可以用vue框架来实现
2.vue可以做哪些事
将数据渲染到指定区域（数据可以是后台获取，也可以由前台自己产生）
可以与页面完成基于数据的交互方式
3.为什么学习Vue
1.整合了Angular React框架的优点（第一手API文档是中文的）
2.单页面应用（得益于vue的组件化开发 => 前台代码的复用），减少IO，提高效率
3.虚拟DOM（提高操作DOM的效应）
4.数据的双向绑定（如：两个输入框同步数据）
二.如何使用Vue：
1 <body> 2 <div id="box1"> 3 <!--{{ }} 会被vue解析为数据的渲染的指定语法--> 4 {{ }} 5 </div> 6 <hr> 7 <div class="box2"> 8 {{ }} 9 </div> 10 </body> 11 <script src="js/vue.js"></script> 12 <script> 13 // 如何使用jq框架 <= 拿到jq框架的对象 $ | jQuery 14 // 类比：如何使用vue框架 <= 拿到vue框架的对象 new Vue() 15 16 // vue对象需要手动创建， 原因：一个vue对象可以只控制页面中的某一部分， 如果一个页面有多个部分都需要被控制，那么就需要创建多个vue对象 17 // vue对象如何与控制的页面进行关联（绑定），采用的是vue对象中的挂载点(挂载点可以唯一标识页面中的某一个区域) 18 new Vue({ 19 el: "#box1" 20 // 挂在在id为box1的div上，那么该div下的所有内容都由该vue对象来控制 21 }) 22 23 new Vue({ 24 el: ‘.box2‘ 25 // 挂在在class为box2的div上，那么该div下的所有内容都由该vue对象来控制（尽量使用id，唯一标识） 26 }) 27 </script>
三.挂载点（Vue实例）：
1 <body> 2 <div id="app"> 3 {{ msg }} 4 </div> 5 </body> 6 <script src="js/vue.js"></script> 7 <script> 8 // Vue实例会根据数据产生虚拟DOM,最终替换掉挂载点的真实DOM(不要挂在到body上) 9 var app = new Vue({ 10 el: ‘#app‘, 11 data: { 12 msg: "今晚嘿嘿" 13 } 14 }); 15 16 // 如果需要使用vue对象(实例), 那么久可以接受Vue创建的结果, 反之就不需要接收 17 console.log(app); 18 console.log(app.$attrs); // vue实例的变量都是以$开头 19 console.log(app.$el); 20 console.log(app.$data.msg); 21 console.log(app.msg); 22 // app对象 = new Vue()实例 = 标签div #app组件 23 24 </script>
四.基础指令
1.文本指令
1 <body> 2 <div id="app"> 3 <p>{{ info }}</p> 4 <!-- v-text 为vue的文本指令 ="info" , info为vue实例data中的一个变量 --> 5 <p v-text="info"></p> 6 <p v-text="msg"></p> 7 <p v-html="res"></p> 8 </div> 9 </body> 10 <script src="js/vue.js"></script> 11 <script> 12 new Vue({ 13 el: "#app", 14 data: { 15 info: "插值表达式", 16 msg: "文本指令", 17 res: "<b>加粗的文本</b>" 18 } 19 }) 20 </script>
2.属性指令
1 <body> 2 <div id="app"> 3 <!-- v-bind:属性 = "变量" --> 4 <!-- 如果abc自定义属性被v-bind:指令绑定了,后面的值也会成为vue变量, 如果就想是普通字符串, 再用‘‘包裹 --> 5 <!-- : 就是 v-bind: 的简写方式 (1.常用 2.一定且只操作属性)--> 6 <p v-bind:abc="‘abc‘" v-bind:title="h_info" :def="hehe">abc</p> 7 8 <!--最常用的两个属性 class | style--> 9 10 <!--class--> 11 <p :class="a"></p> <!-- 单类名 --> 12 <p :class="[a, b]"></p> <!-- 多类名 --> 13 <p :class="{c: d}"></p> <!-- 了解: c为类名,是否起作用取决于d值为true|false 开关类名 --> 14 <!--style--> 15 <p :style="s1"></p> <!-- s1为一套样式 --> 16 <p :style="[s1, s2, {textAlign: ta}]">12345</p><!-- 了解: s1,s2均为一套样式, ta是一个变量,专门赋值给textAlign("text-align") --> 17 18 </div> 19 </body> 20 <script src="js/vue.js"></script> 21 <script> 22 new Vue({ 23 el: "#app", 24 data: { 25 h_info: "悬浮提示", 26 hehe: "呵呵", 27 a: ‘active‘, 28 b: ‘rule‘, 29 d: false, 30 s1: { // 样式1: 值1, ..., 样式n: 值n 31 width: ‘200px‘, 32 height: ‘200px‘, 33 background: ‘red‘ 34 }, 35 s2: { 36 borderRadius: ‘50%‘ 37 }, 38 ta: ‘center‘ 39 } 40 }) 41 </script>
3.事件指令
1 <body> 2 <div id="app"> 3 <!-- v-on:事件 = "变量 简写 @ --> 4 <!-- 事件绑定的变量可以在data中赋值,但建议在methods中赋值 --> 5 <p v-on:click="fn1">11111111111111</p> 6 <p @click="fn2">22222222222222</p> 7 <!--vue事件的绑定可以传自定义参数--> 8 <p @click="fn3(333)">3333333333333333</p> 9 <!--vue事件的绑定不传自定义参数, 默认将事件对象传过去了--> 10 <p @click="fn4">4444444444444444</p> 11 <!--vue事件的绑定传自定义参数, 还要将事件对象传过去了, 要明确传$event--> 12 <p @click="fn5(555, $event)">5555555555555555</p> 13 14 </div> 15 </body> 16 <script src="js/vue.js"></script> 17 <script> 18 new Vue({ 19 el: "#app", 20 data: { 21 // 事件在data中提供一个函数地址,可以实现事件 22 fn1: function () { 23 console.log("11111111111111") 24 } 25 }, 26 // 事件尽量(要求)都放在vue实例的methods中 27 methods: { 28 fn2: function () { 29 console.log("22222222222222") 30 }, 31 fn3 (arg) { // ES6语法 32 console.log(arg) 33 }, 34 fn4: function (ev) { 35 console.log(ev) 36 }, 37 fn5: function (arg, ev) { 38 console.log(arg) 39 console.log(ev) 40 }, 41 } 42 }) 43 </script>
4.表单指令
1 <body> 2 <div id="app"> 3 <!-- v-model = "变量" 本质操作的就是表单元素的value --> 4 <!--v-model就是完成数据的双向绑定--> 5 <form action=""> 6 <input type="text" v-model="info"> <!-- info变量就是代表输入框的value --> 7 <input type="text" v-model="info"> 8 9 </form> 10 <p> {{ info }} </p> 11 <!--v-once只会被赋值一次,就不再改变,并且要结合插值表达式使用--> 12 <p v-once="info">{{ info }}</p> 13 </div> 14 </body> 15 <script src="js/vue.js"></script> 16 <script> 17 new Vue({ 18 el: "#app", 19 data: { 20 // info: "初始value", 21 info: "" 22 }, 23 }) 24 </script>