挂载点 el
new Vue({ el: '#app' })
- 1 一个挂载点只能控制一个页面结构（优先匹配到的结构）
- 2 挂载点挂载的页面标签严格建议用id属性进行匹配（一般习惯用app）
- 3 html标签与body标签不能作为挂载点（html和body标签不可以被替换，组件中详细介绍）
- 4 是否接受vue对象，是外界是否要只有vue对象的内容决定的
插值表达式、data: 数据
<script> <div id="app"> <div class="d1"> {{ num }} </div> <div class="d1"> {{ num }} </div> </div> <div id="main"> {{ n }} </div> <script> var app = new Vue({ el: '#app', data: { num: 100 } }); console.log(app.$data.num, app.num); new Vue({ el: '#main', data: { n: app.num } }); </script>插值表达式
- 1 空插值表达式：{{ }}
- 2 插值表达式中渲染的变量在data中可以初始化
- 3 插值表达式可以进行简单运算与简单逻辑
- 4 插值表达式符号冲突解决，用delimiters（标识符）自定义（了解）
<div id="app"> <p>{{ info }}</p> <p>{{ msg }}</p> <p>{{ }}</p> <p>{{num}}</p> <p>{{num + 10 * 2}}</p> <p>{{ msg.length + num }}</p> <p>{{ msg[4] }}</p> <p>{{ msg.split('')[4] }}</p> <p>[{ num }]</p> </div> <script> new Vue({ el: '#app', data: { info: '信息', msg: 'message', num: 10, }, // 控制vue插值表达式符合 delimiters: ['[{', '}]'], }) </script>
过滤器 filters
1 用实例成员filters来定义过滤器
2 在页面结构中，用 | 来标识使用过滤器
3 过滤方法的返回值就是过滤器过滤后的结果
4 过滤器可以对1~n个变量进行过滤，同时还可以传入辅助的变量，
过滤器方法接受参数是安装传入的位置先后
<body> <div id="app"> <!-- 简单使用：过滤的对象会作为参数传给过滤器 --> <p>{{ num | add(20) }}</p> <!-- 串联使用：将第一个过滤器结果作为参数给第二个过滤器 --> <p>{{ num | add(100) | jump(2) }}</p> <!-- 究极使用 --> <p>{{ n1, n2 | fn(99, 77) }}</p> <!-- 你品，你细品 --> <p>{{ n1, n2 | fn(99, 77), n1, n2 | fn(100) }}</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { num: 10, n1: 66, n2: 88 }, filters: { add: function (a, b) { console.log(a, b); return a + b; }, jump: function (a, b) { return a * b }, fn: function (a, b, c, d) { console.log(a, b, c, d); return a + b + c + d; } } }) </script>
方法 methods
methods 为事件提供实现体（函数），与事件指令配合使用
<script> var app = new Vue({ el: '#app', methods: { pClick () { // 点击测试 }, pOver () { // 悬浮测试 } } }) </script> <!-- v-on:为事件绑定的指令 --> <!-- methods为事件提供实现体-->
计算属性 computed
- 其实就是vue中的方法属性，方法名可以作为属性来使用，属性值为方法的返回值
- 在 computed 中声明的方法属性，不能在data中重复声明，比data中声明的属性要多出写逻辑的地方
- 方法属性，自带监听机制，在方法属性中出现的变量，都会被监听，一旦有任何被监听的变量值发生更新，方法属性都会被调用更新方法属性的值
- 方法属性一定要在页面中渲染一次，方法属性采用意义，多次渲染，方法属性只会被调用一次
计算机案例：
<div id="app"> <!-- type="number"表示只能写数字 --> <input type="number" v-model="num1" max="100" min="0"> + <input type="number" v-model="num2" max="100" min="0"> = <button>{{ sum }}</button> </div> <script> new Vue({ el: '#app', data: { // sum: '', // 重复声明 num1: '', num2: '', }, computed: { sum () { // num1和num2都在该方法属性中，所以有一个更新值，该方法都会被调用 if (this.num1 && this.num2) { return +this.num1 + +this.num2; // +this.num1是将字符串快速转换澄数字 } return '结果'; } } }) </script>
监听属性 watch
- watch 中不定义属性，只是监听属性，所以方法的返回值没有任何意义，只是监听变量值是否发生更新
- watch中的方法名，就是被监听的属性（方法名同被监听属性名）
- 被监听的变量值一旦发生更新，监听方法就会被调用
应用场景：
- k线图：股票数据变化，页面的k线图重新渲染（需要逻辑将数据转换为图形）
- 拆分姓名：录入姓名，拆分为姓和名（需要逻辑将一个数据拆分为多个数据）
案例：
<div id="app"> 姓名：<input type="text" v-model="full_name"> <hr> 姓：<button>{{ first_name }}</button> 名：<button>{{ last_name }}</button> </div> <script> new Vue({ el: '#app', data: { full_name: '', first_name: '未知', last_name: '未知' }, watch: { full_name () { if (this.full_name) { // 只是实现简易的拆分逻辑 this.first_name = this.full_name.split('')[0]; this.last_name = this.full_name.split('')[1]; } else { this.first_name = '未知'; this.last_name = '未知'; } } } }) </script>
总结
以上所学实例成员
总结：
{ el: 使vue与html页面结构建立关联，挂载标签，id选择器唯一绑定 data: {{ 内部可以写基本类型与变量，还可以完成简单运算与逻辑 }} delimiters: 插值表达式符号冲突解决，用delimiters自定义 filters: 过滤方法的返回值就是过滤器过滤后的结果 mothods: 自定义 Vue 控制的方法，给事件指令绑定的 computed:定义方法属性，返回值为属性值，方法内的变量都会被监听 watch: 监听与方法名同名的属性，被监听的数据更新调用方法 }