Vue 实例成员
一. 什么是Vue
可以独立完成前后端分离时 Web项目的JavaScript框架
二.为什么学Vue
前端三大主流框架：Angular React Vue Vue结合了其他框架优点、轻量级、中文API、数据驱动、双向绑定、MVVM设计模式、组件化开发、单页面应用 # vue是js渐进式框架 # 根据开发需求，可以决定vue框架控制项目的具体方位：可以为一个标签，也可以为一个页面，甚至可以为整个项目
# 补充:与jq对比,每个页面都要导入jq,才能在页面中使用,而且jq控制的是整个页面html,不能局部控制
三.如何使用Vue
-
开发版本：vue.js
-
生产版本：vue.min.js
vue的导入: <!--方式一: 本地--> <script src="js/vue.js"></script> <!--方式二: cdn--> <script src="https://cn.vuejs.org/js/vue.min.js"></script>
插值表达式: <div id="app"> <!-- {{ }} 是插值表达式,中间的info是变量,可通过vue实例成员data赋值 --> <!-- 注意:插值表达式中可以写基础类型的数据,只有写变量时才能被data赋值 --> {{ info }} {{ 'info' }} 渲染到页面是: info </div>
<1>Vue实例:
<script> new Vue({ // 实例成员 }) </script> <!-- 实例与页面挂载点(标签)一一对应 一个页面中可以出现多个实例对应多个挂载点 实例只操作挂载点内部内容 -->
<2>实例成员:
- 挂载点 | el
使vue与html页面结构建立关联
<body> <div id="app">
</div>
<div class='app01'>
</div>
</body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app' // 挂载点(此处通过ID挂载) 控制了ID为app的标签 })
new Vue({
el: '.app01' //也可以通过class挂载, 控制了class为app01的标签
}) </script>
注意:
1) html标签与body标签不能作为挂载点
2) 一个Vue实例对象只挂载一个匹配标签，所以挂载点一般用id标识
- 数据 | data
<body> <div id="app"> {{ info }} {{ 'info' }} <p>{{ num }}</p> <p>{{ result }}</p> <p>{{ arr }}</p> <p>{{ dic }}</p> </div> </body> <script src="js/vue.js"></script> <script> let app = new Vue({ el: '#app', data: { info: 'message', num:100, result: true, arr: [1, 2, 3, 4, 5], dic: { name: 'xionger', age: 20 } } }) </script> <script> console.log(app); // vue对象 console.log(app.$data.info); // message console.log(app.info); // message </script>
1) data为vue环境(被挂载的标签内部)提供数据，采用字典{变量名:值}形式 2) 在插值表达式{{}}中，直接书写数据的key(变量名)来访问数据(值) 3) 在外部通过接收实例的变量app，访问实例成员(实例成员都用$开头)，间接访问到数据 app.$data.info 4) 在外部也可以通过实例变量app直接访问数据 app.info 5) 在vue实例内部的方法methods中，使用变量，this.info (this其实就是等是app对象)
- 过滤器 | filters
<!-- 1) 过滤器本身就是处理数据的函数，可以将插值表达式中的数据作为参数传入过滤器函数进行处理，得到的函数返回值就是处理后的结果 2) 过滤器使用语法 {{ ...变量 | 过滤器(...变量) }} 3) 过滤器在实例中用filters成员提供 4) 参数多传不处理,少传返回NaN -->
<body> <div id="app"> <!-- 插值表达式可以直接做简单的运算 --> <p>{{ num + 3.5 }}</p> <!--<p>{{ msg.split('')[5] }}</p>--> 支持[]形式的索引取值
<!-- 插值表达式复杂的逻辑借助Vue实例中filters内部函数实现 --> <p>{{ num | f1 }}</p> <p>{{ 10, 20 | f2(50, 80) }}</p> <p>{{ 10, 20,30 | f2(50, 80) }}</p> <p>{{ 10 | f2(50, 80) }}</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data:{ num: 100, msg: 'xionger'
}, filters:{
// 定义函数,对插值表达式内的数据做操作 f1:function (num) { return num*2 },
// 支持多个参数 f2:function (a,b,c,d) { return a+b+c+d } } }) </script>
- 方法 | methods
<!-- methods为事件提供实现体(函数) 与事件指令配合使用 -->
v-on:为事件绑定的指令
methods为事件提供实现体
<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>
- js对象(即字典)补充
let b = 20; let dic = { a: 10, // 字典本身就是对象，key都是字符串形式可以省略引号 b // 值为变量时，且与key同名，可以简写 }; console.log(dic)
- 插值表达式转义 | delimters
<!-- 防止django的模板渲染语法与插值表达式冲突,前端通常会转义插值表达式的{{ }} -->
<div id="app"> {{ msg }} {[ msg ]} </div> <script> new Vue({ el: '#app', data: { msg: '12345' }, // delimiters: ['{{', '}}'], delimiters: ['{[', ']}'], }) </script>
一个变量的值依赖多个变量(多变一)，且依赖的任意一个变量发生改变，该变量都会改变
<!-- 1) computed是用来声明 方法属性(伪装成变量的方法) 的 2) 声明的方法属性不能在data中出现 3) 方法属性必须在页面中渲染使用，才会对该方法内部出现的所有变量进行监听 4) 计算属性的值来源于监听方法的返回值 -->
<div id="app"> 姓：<input type="text" v-model="fName"> 名：<input type="text" v-model="lName"> 姓名：<b>{{ flName }}</b> </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { fName: '', lName: '', }, computed: { // flName 要在页面渲染 flName(){ // this.fName和this.lName是被监听的变量 // 变量flName的值由函数的返回值决定 return this.fName + this.lName; } } }) </script>
- 监听属性 | watch
多个变量的值依赖一个变量(一变多)，该变量发生改变，所有依赖变量都会改变
<!-- 1) watch是用来声明 方法属性 的 2) watch为data中已存在的属性设置监听事件 3) 监听的属性值发生改变，就会触发监听事件 4) 监听事件的方法返回值没有任何意义 -->
<body> <div id="app"> 姓名：<input type="text" v-model="fullName"> 姓：<b>{{ firstName }}</b> 名：<b>{{ lastName }}</b> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data:{ fullName:'', firstName:'', lastName:'', }, watch:{ fullName(){ // 从data中拿到fullname进行操作 namearr = this.fullName.split(''); // 给data中的firstname和lastName赋值,渲染到插值表达式中 this.firstName = namearr[0]; this.lastName = namearr[1]; // return 的值没有任何意义 } } }) </script>
