根据开发需求，可以决定vue框架控制项目的具体方位:可以为一个标签，也可以为一个页面，甚至可以为整个项目。
主流前台框架:Angular,React,Vue
vue是前台html+css+js框架，是不同于js与jq的数据驱动框架
vue优点:结合其他框架的优点，轻量级，中文API，数据驱动，双向绑定，MVVM设计模式，组件化开发，单页面应用
vue环境：本地导入与cdn导入
vue是通过挂载点来与html页面结构建立关联
1.html与body不能作为挂载点
2.一个vue对象挂载点之后索引一个匹配结果，所以挂载点一般用id标识
3.实例与页面挂载点一 一对应，页面可以出现多个实例对应多个挂载点
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="wrap"> {{ }} <hr> <div class="main"> {{ }} </div> <hr> <div class="main"> {{ }} </div> </div> </body> <script src="static/vue.js"></script> <script> new Vue({ el:‘#wrap‘ //el 表示挂载点 控制此div内所有 }) </script> </html>
1.用实例成员data为vue环境提供数据，数据采用字典{}形式
2.在插值表达式{{ }}中，直接书写数据的key来访问数据
3.在外部通过接收实例变量app，访问实例成员(实例成员都用$开头)，间接访问到数据 app.$data.info
4.在外部也可以通过实例变量app直接访问数据 app.info
5.在vue实例内部的方法methods中，使用变量, this.info (this其实就等价于app)
<body> <div id="app"> <p>{{info}}</p> <p>{{num}}</p> <p>{{result}}</p> <p>{{arr}}</p> <p>{{dic}}</p> </div> </body> <script src="static/vue.js"></script> <script> let app = new Vue({ el:‘#app‘, //el 表示挂载点， data:{ info:‘message‘, num:100, result:true, arr:[1,2,3,4,5], dic:{ name:‘zzp‘, age:18 } } }) </script> <script> console.log(app); console.log(app.$data.info); console.log(app.num) </script> </html>
1.过滤器本身就是数据处理函数，可以将插值表达式中的数据作为参数进行处理，得到的函数返回值就是处理后的结果
2.过滤器使用语法 { { ...变量 | 过滤器(... 变量) } }
3.过滤器在实例中用filters成员提供
<div id="app"> <!--1）插值表达式可以直接做简单运算--> <p>{{ num + 3.5 }}</p> <p>{{ msg.split(‘‘)[4] }}</p> <p>{{ num | f1 }}</p> <p>{{ 10, 20, 30, 40 | f2 }}</p> <p>{{ 10, 20 | f2(50, 80) }}</p> <p>{{ 120 | f2 }}</p> </div> <script src="js/vue.js"></script> <script> new Vue({ el: ‘#app‘, data: { num: 100, msg: ‘message‘ }, filters: { // 总结：{{ num | f1 }} f1: function (num) { //可以省略function 直接 f1(num){ return num*2} return num * 2 }, // 总结：{{ a,b,c,d | f2 }} {{ a,b,c | f2(d) }} { a,b| f2(c,d) }} { a| f2(b,c,d) }} f2: function (a, b, c, d) { console.log(a, b, c, d); return a + b + c + d } } }) </script>
<style> .box { background-color: orange } </style> <div id=‘app‘> <p class="box" v-on:click="pClick">测试</p> <p class="box" v-on:mouseover="pOver">测试</p> </div> <script> var app = new Vue({ el: ‘#app‘, methods: { pClick () { // 点击测试 }, pOver () { // 悬浮测试 } } }) </script> <!-- 了解v-on:为事件绑定的指令 --> <!-- methods为事件提供实现体-->
1.插值表达式，同v-text指令，渲染普通文本
2.v-html指令可以渲染有html语法的文本，能够解析html语法
3.文本指令中可以渲染 变量 也可以渲染 常量
<div id="app"> <p>{{ info }}</p> <!--1）v-指令名="变量"，变量是需要data提供数据值的 --> <p v-text="info"></p> <!--2）v-指令名="常量"，常量采用常量基本的语法，数字与布尔类型等可以直接书写的直接书写，字符串等需要特殊符号的需要添加符号--> <p v-text="123"></p> <p v-text="true"></p> <p v-text="‘abc‘ + info"></p> <p v-text="[1, 2, 3]"></p> <!--3）v-html可以解析html语法--> <p v-html="`<b style=‘color:red‘>好的</b>`"></p> <p v-text="‘<b>好的</b>‘"></p> </div> <script src="js/vue.js"></script> <script> new Vue({ el: ‘#app‘, data: { info: ‘data提供的数据‘, } }) </script>
1.语法:v-on：事件名 = ‘函数名(参数)‘
2.简写: @事件名 = ‘函数名(参数)‘
3.用methods实例成员提供 事件函数的实现
4.事件传参:函数名 | 函数名() | 函数名(自定义参数) | 函数名($event,自定义参数)
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> body { /*页面文本不允许选择*/ user-select: none; } .low-num { cursor: pointer; } .low-num:hover { color: red; } </style> </head> <body> <div id="app"> <!-- 事件指令：v-on:事件名="事件函数名" --> <p class="low-num" v-on:click="lowNum"> <span>点击减一：</span> <span>{{ num }}</span> </p> <p v-on:dblclick="dblAction">双击</p> <!-- v-on:事件名="事件函数" 可以简写为 @事件名="事件函数" --> <p @mouseover="overAction()">悬浮</p> <p @mouseover="overAction(10)">悬浮1</p> <p @mouseover="overAction(10, 20)">悬浮2</p> <p @mouseover="overAction(10, 20, $event)">悬浮3</p> <!-- 事件传参： @事件=‘方法‘ 默认传入事件对象 $event @事件=‘方法()‘ 不传递任何参数 @事件=‘方法(参数...)‘ 只传递自定义参数 @事件=‘方法($event, 参数...)‘ 自定义传参时传递事件对象 --> </div> </body> <script src="js/vue.js"></script> <script> let app = new Vue({ el: ‘#app‘, data: { num: 99 }, methods: { lowNum: function () { // 在vue实例内部的方法中，使用变量 // alert(this.num) this.num -= 1; }, dblAction (ev) { // alert(‘双击事件‘); console.log(ev) }, overAction(a, b, c) { console.log(a, b, c) } } }) </script> </html>
原文：https://www.cnblogs.com/s686zhou/p/11639136.html
