javascript|vue基础、插值操作、计算属性、ES6补充 javascript|vue

vue

vue基础
- 1.1 el:挂载点
- - Vue实例的作用范围？
  - 是否可以选择其他的选择器？
  - 是否可以设置其他的DOM元素？
- 1.2 data:数据对象
- 1.3 vue 列表展示
- 1.4 计数器（*）
- 1.5 Vue的生命周期
- 1.6 插值操作—mustache语法
插值操作
- 2.1 v-once指令
- 2.2 v-text指令
- 2.3 v-html指令
- 2.4 v-pre指令
- 2.5 v-cloak指令
- 2.6 v-on指令
- 计数器案例
v-bind 动态绑定
- 3.1 v-bind动态绑定class(对象语法)
- 3.1 v-bind动态绑定class(数组语法)
- 3.3 v-bind和v-for结合案例
- 3.4 v-bind动态绑定style(对象语法)
- 3.5 v-bind动态绑定style(数组语法)
计算属性
- 4.1 计算属性的基本使用
- 4.2 计算属性的复杂操作
- 4.3 计算属性的setter和getter
- 4.4 计算属性和methods的对比
ES6语法(部分)
- 5.1 const使用和注意
- 5.2 对象字面量增强写法

vue基础 1.1 el:挂载点该属性决定了Vue对象挂载到哪个元素上。
Vue实例的作用范围？
Vue会管理el选项命中的元素以及其后代元素
是否可以选择其他的选择器？
可以，推荐选择ID选择器，唯一性
是否可以设置其他的DOM元素？
可以，除body、html之外其他的双标签都可以使用

Document {{message}} ="https://unpkg.com/vue@2.6.12/dist/vue.js"> > new Vue({ el: '#app', data: { message: 'hello vue.js!' } })

文章图片

在console窗口输入

文章图片

页面数据同步更改

文章图片

1.2 data:数据对象 ■ Vue中用到的数据定义在data中
■ data中可以定义复杂数据类型
■ 渲染复杂类型数据时，遵循js的语法即可

Document {{message}} {{beauty.name}} {{beauty.age}} {{beauty.lover}} {{campus[2]}} ="https://unpkg.com/vue@2.6.12/dist/vue.js"> > new Vue ({ el: '#app', data: { message: 'hello vue.js', beauty: { name: 'zzy', age: '18', lover: 'lyf' }, campus: ['丑鸭子','老鳄鱼','大狗勾'] } })

文章图片

1.3 vue 列表展示

Document > td { border: 1px solid black; } {{item}} ="/js/vue.js"> > const app = new Vue({ el: '#app', data: { love: ['l','y','f','l','o','v','e'] } })

文章图片

文章图片

1.4 计数器（*）

Document 当前计数{{number}} ="/js/vue.js"> > let app = new Vue({ el: '#app', data: { number: 0 }, methods: { increment() { this.number++; }, decrement() { this.number--; } } })

1.5 Vue的生命周期

文章图片

1.6 插值操作—mustache语法 mustache语法即双括号语法
mustache语法中不仅可以可以直接写变量，也可以写简单的表达式
详细请查询：https://www.cnblogs.com/happ0/p/8075562.html
插值操作 2.1 v-once指令 ■ 该指令后面不需要跟任何表达式
■ 该指令表示组件和元素只渲染一次，不会随着数据的改变而改变

{{message}}{{message}}

2.2 v-text指令 ■ v-text指令的作用：设置标签的内容（textContent）
■ 默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
下列代码展示:
1.添加文本内容的方式
2.v-text在标签中间添加的内容不显示

Document 你好啊{{message + '!'}}zzy zzy zzy ="https://unpkg.com/vue@2.6.12/dist/vue.js"> > new Vue ({ el: '#app', data: { message: 'hello vue.js!', info: '前端我来惹!' } })

文章图片

2.3 v-html指令 ■ v-html指令的作用是：设置元素的innerHTML
■ 内容中有html结构会被解析为标签
v-html 与 v-text 区别：
1.不加html结构时显示相同
2.v-html会将html结构转换为指令，v-text不会转换
3.解析文本使用v-text,解析html结构用v-html

Document ="https://unpkg.com/vue@2.6.12/dist/vue.js"> > new Vue({ el: '#app', data: { message: "百度" } })

文章图片

2.4 v-pre指令将html标签里面的内容原封不动的显示出来，不做任何解析

{{url}} ="/js/vue.js"> > const app = new Vue({ el: '#app', data: { url: '百度一下' } })

文章图片

2.5 v-cloak指令 ■ cloak“帐篷”，当mustache语法解析不成功时，隐藏标签内容
■ 加载之前cloak存在div中
■ 加载之后cloak不存在div中

2.6 v-on指令 ■ 为元素绑定事件
■ 时间名不需要写 on
■ 指令可以简写为@
■ 绑定的方法定义在method属性中
■ 方法内部通过this关键字可以访问定义在data中的数据

v-on {{food}} ="https://unpkg.com/vue@2.6.12/dist/vue.js"> > new Vue({ el: '#app', data: { food: '西红柿炒蛋' }, methods: { dolt: function () { alert('做it'); }, changeFood: function () { // console.log(this.food); this.food += 'delicious!\t'; } } })

文章图片

计数器案例

Document > #app { width: 150px; height: 30px; margin: 100px auto; border: 1px solid #777; border-radius: 5px; } span { /* display: block; */ text-align: center; } button { width: 50px; height: 30px; font-size: 20px; color: rgb(180, 57, 57); } button:first-child { float: left; } button:nth-child(1) { float: right; } >{{number}} ="https://unpkg.com/vue@2.6.12/dist/vue.js"> > //点加号数字递增,点减号数字递减 var app = new Vue ({ el: '#app', data: { number: 1 }, methods: { lose:function() { if( this.number == 0) { alert('不能再减啦'); }else { this.number--; } }, add:function() { if( this.number == 10) { alert('不能再加啦'); }else { this.number++; } } } })

文章图片

v-bind 动态绑定

百度一下 ="/js/vue.js"> > const app = new Vue({ el: '#app', data: { message: "https://www.baidu.com/" } })

3.1 v-bind动态绑定class(对象语法) 绑定对象：对象语法
■ 对象语法的含义：class后面跟的是一个对象
动态语法有几种用法，如以下代码：

Document {{message}}{{message}}hello 按钮 ="/js/vue.js"> > const app = new Vue({ el: '#app', data: { message: "hello", isActive: true, isLine: true }, methods: { btnClick: function() { this.isActive = !this.isActive } } })

3.1 v-bind动态绑定class(数组语法)

Document ="/js/vue.js"> > const app = new Vue({ el: '#app', data: { message: 'hello', active: 'aaaa', line: 'bbbb' }, methods: { getClasses: function() { return [this.active, this.line] } } })

3.3 v-bind和v-for结合案例 3.4 v-bind动态绑定style(对象语法) ■ 利用v-bind:style绑定样式
■ 写属性名有两种，如font-size：
1.驼峰命名法： fontSize
2.短横线分隔：‘font-size’

:style="{key(属性名)：value(属性值)}"

Document {{message}}{{message}} ="/js/vue.js"> > const app = new Vue({ el: '#app', data: { message: 'enheng', finalSize: 50, finalColor: 'red' }, methods: { getStyles: function () { return {fontSize: this.finalSize + 'px',color: this.finalColor} } } })

3.5 v-bind动态绑定style(数组语法)

:style="[数组元素1,数组元素2]"

文章图片

Document {{message}} ="/js/vue.js"> > const app = new Vue({ el: '#app', data: { message: 'hh', baseStyle: {backgroundColor: 'pink'}, baseStyle1: {fontSize: '50px'} } })

计算属性在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。
不经过计算属性，我们可以在 method 中定义一个相同的函数来替代它。对于最终的结果，两种方式确实是相同的。
然而，不同的是计算属性是基于它的依赖缓存。计算属性只有在它的相关依赖发生改变时才会重新取值。
这就意味着只要 message 没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
4.1 计算属性的基本使用字符串拼接形式

Document {{firstName + ' '+ lastName}} {{firstName}} {{lastName}}{{getFullName()}}{{fullName}} ="/js/vue.js"> > const app = new Vue({ el: '#app', data: { firstName: 'ziyi', lastName: 'lv' }, methods: { getFullName: function() { return this.firstName + ' ' + this.lastName } }, computed: { fullName: function() { return this.firstName + ' ' + this.lastName } } })

文章图片

4.2 计算属性的复杂操作数组形式

Document 总价：{{totalPrice}} ="/js/vue.js"> > const app = new Vue({ el: '#app', data: { books: [ { id: 100, name: 'JavaScript', price: 119 }, { id: 101, name: 'HTML', price: 118 }, { id: 102, name: 'CSS', price: 117 }, { id: 103, name: 'Vue.js', price: 116 } ] }, computed: { totalPrice: function () { let result = 0 for (let i = 0; i < this.books.length; i++) { result += this.books[i].price } return result } } })

文章图片

4.3 计算属性的setter和getter 每个计算属性都包含一个getter和一个setter
正常情况下，我们只是使用getter来读取。
在某些情况下，你也可以提供一个setter方法（几乎不用）。
在需要写setter的情况下，代码如下：

Document {{fullName}} ="/js/vue.js"> > const app = new Vue({ el: "#app", data: { firstName: 'zzy', lastName: 'beauty' }, computed: { fullName: { // 计算属性一般没有set，称为只读属性 set: function(newValue) { // 当通过console给属性赋值时，会调用set方法 // console.log('.....',newValue); const names = fullName.split(' '); this.firstName = names[0]; this.lastName = names[1]; }, get: function() { return this.firstName + ' ' + this.lastName } } // 下列为简写的只读属性，省略了get // fullName: function() { //return this.firstName + ' ' + this.lastName // } } })

4.4 计算属性和methods的对比计算属性在运行时会进行缓存，调用一次后会自动调用缓存，而不是重新加载
methods会反复加载，不进行缓存
注：不改变属性值的情况下

Document {{getfullName()}} {{getfullName()}} {{getfullName()}} {{getfullName()}}{{fullName}} {{fullName}} {{fullName}} {{fullName}} ="/js/vue.js"> > const app = new Vue({ el: '#app', data: { firstName: 'zzy', lastName: 'girl' }, methods: { getfullName: function() { console.log('getfullName'); return this.firstName + ' ' + this.lastName } }, computed:{ fullName: function() { console.log('fullName'); return this.firstName + ' ' + this.lastName } } })

文章图片

ES6语法(部分) 块级作用域
JS中使用var来声明一个变量时, 变量的作用域主要是和函数的定义有关.
针对于其他块定义来说是没有作用域的，比如if/for等，这在我们开发中往往会引起一些问题。
if和for没有作用域，变量可以覆盖
闭包可以解决变量覆盖：函数是一个作用域
5.1 const使用和注意 const主要作用是将某个变量修饰为常量，const修饰的标识符为常量，不可再次赋值
使用const的情况：当标识符不会再被赋值时，就可以使用const来保证数据的安全性
建议：在ES6开发中，优先使用const，只有需要改变某个标识符时才使用let
常量的含义是指向的对象不能修改，但是可以改变对象内部的属性
5.2 对象字面量增强写法字面量：就是直观的写法

【javascript|vue基础、插值操作、计算属性、ES6补充】const obj = new Object()
const obj = {} 这里的{}就是字面量

Document ="/js/vue.js"> >const app = new Vue({ el: '#app', }) // 1.属性的增强写法 const name = 'zzy'; const age = 18; const sex = 'girl'; // ES5的写法 // const obj = { //name: name, //age: age, //sex: sex // }// ES6写法 // const obj = { //name, //age, //sex // } // console.log(obj); // 2.函数的增强写法 // ES5写法 // const obj = { //run: function() {//}, //eat: function() {//} // }// ES6写法 const obj = { run() {}, eat() {} }