目录
vue
渐进式JavaScript 框架
vue 的挂载点
提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 或者 上。
- 通过 el 属性 设置挂载点
const app = new Vue({
// #app 对应的是页面中的div#app
el:'#app'
})
- 通过显示调用 $mount() 方法
const app = new Vue({
// #app 对应的是页面中的div#app
}).$mount('#app')
vue的数据
vue的数据都是在data属性中进行存储
const app = new Vue({
// #app 对应的是页面中的div#app
el:'#app',
// vue的数据存储
data:{
msg:'hello vue'
}
})
vue的指令
- v-if v-else v-else-if
- v-for
- v-on
- v-bind
- v-html
- v-text
- v-show
- v-model
- v-pre
- v-once
- v-cloak
- v-slot
vue的插值语法
- 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号{{}}) 的文本插值：
<标签名>{{data中的key}}</标签名>
- 通过指令进行插值
v-htmlv-text
- v-html: 可以识别标签， 作用就是标签内部插入子元素
<标签名 v-html='data中的key'></标签名>
- v-text: 不能识别标签， 作用就是标签内部插入纯文本， 类似于 {{}}
<标签名 v-text='data中的key'></标签名>
vue的条件渲染 v-if v-else
<标签名 v-if='data中的key'></标签名>
<标签名 v-else-if='data中的key'></标签名>
<!-- v-else 后边没有表达式 -->
<标签名 v-else></标签名>
vue的列表渲染（循环）v-for
- 遍历数组
<!-- item 就是数组的中每个值 -->
<标签名 v-for='item in data中的key（数组）' :key='item'></标签名>
<!-- 获取索引值： 传入第二个参数 index -->
<标签名 v-for='(item, index) in data中的key（数组）' :key='index'></标签名>
- 遍历对象
<!-- value 就是对象中的值-->
<标签名 v-for='value in data中的key（对象）' :key='item'></标签名>
<!-- 获取对象的键： 传入第二个参数 name -->
<标签名 v-for='(value, name) in data中的key（对象）' :key='index'></标签名>
<!-- 获取对象的索引值： 传入第三个参数 index -->
<标签名 v-for='(value, name, index) in data中的key（对象）' :key='index'></标签名>
- 直接循环
<!-- number 具体的数值 -->
<标签名 v-for='item in number' :key='item'></标签名>
v-for=‘item in items’ 形式， 也可以把 in 替换 为 of
你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：
元素的出现和隐藏
v-if 和 v-show 都可以控制元素的出现和隐藏；
但是原理不同； v-if是通过创建和销毁DOM实现控制元素的出现和隐藏； v-show是 通过css样式 display:none 控制DOM的出现和隐藏
使用场景：一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好
<标签名 v-if='data中的key'></标签名>
<标签名 v-show='data中的key'></标签名>
vue的事件绑定 v-on
v-on事件绑定可以简写 ： v-on: 整体简写为 @
<!-- 直接绑定事件 -->
<标签名 v-on:事件名='methods中的方法名'></标签名>
<标签名 @事件名='methods中的方法名'></标签名>
<!-- 可以添加事件修饰符 -->
<标签名 v-on:事件名.事件修饰符='methods中的方法名'></标签名>
<!-- 事件修饰符 根据实际功能确定 -->
<标签名 v-on:事件名.事件修饰符1.事件修饰符2='methods中的方法名'></标签名>
vue的属性绑定 v-bind
绑定标签的属性
- 绑定标签固有的属性
<标签名 v-bind:src='data中的key' v-bind:title=''></标签名>
<!-- 案例： 绑定原始的字符串， 需要给字符串加引号 -->
<p v-bind:title=' "直接挟制了" '>属性绑定</p>
<!-- 可以进行字符串拼接 -->
<p v-bind:title=' "直接挟制了" + str'>属性绑定</p>
- 绑定自定义属性
<标签名 v-bind:index='data中的key' ></标签名>
绑定样式
- 通过绑定行内样式
<!-- 绑定单一的样式值 使用对象的形式， {key:value} key是样式属性名(确定的)， value 是绑定的属性值（动态改变的），对应data中的key -->
<标签名 v-bind:style='{color:data中的key}' ></标签名>
<!-- 直接绑定样式对象 -->
<标签名 v-bind:style='data中的key' ></标签名>
<!-- 绑定多个样式对象 和单一样式值 使用数组的形式（综合应用 ） -->
<标签名 v-bind:style='[data中的key, ....] '></标签名>
- 通过绑定类名class
<!-- 绑定一个类名 -->
<标签名 v-bind:class='data中的key' > </标签名>
<!-- 动态绑定类名： 类名的添加和移除通过条件控制 使用对象的形式 ; className 就是类名 -->
<标签名 v-bind:class='{className: data中的key}' > </标签名>
<!-- 绑定多个类名 使用数组的形式-->
<标签名 v-bind:class='[data中的key, data中的key2, {className:data中的key}]' > </标签名>
<!-- 固定类名和绑定类名 固定类名需要添加引号，使用数组的形式 -->
<标签名 v-bind:class='[ "wrap", data中的key, data中的key2, {className:data中的key}]' > </标签名>
vue的双向数据绑定 v-model
v-model 主要是绑定表单元素的
<表单元素标签 v-model='data中的key' >
<!-- 获取用户输入的值 -->
<input type='text' v-model='data中的key' >
<!-- 绑定单个复选框： 绑定一个布尔值 在vue的实例中定义 checked:true -->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<!-- 绑定多个复选框： 绑定一个数组 -->
跳过编译 v-pre
v-pre没有表达式； 效果： 原始展示 {{}} 语法（写什么就是什么）； 跳过该元素和其子元素的编译过程
<标签名 v-pre>{{内容是原样输出，不会编译}}</标签名>
初始化渲染一次 v-once
没有表达式； 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<标签名 v-once>{{data中key； 内容只会被渲染一次，后期改变，不会响应}}</标签名>
v-cloak (可以避免{{}}的闪烁的效果)
没有表达式； 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
<style>
[v-cloak]{display: none}
</style>
<标签名 v-cloak>{{data中key； 直到实例编译结束才渲染}}</标签名>
vue的计算属性 computed
计算属性是一个函数，本质依然是属性， 用法和data的用法一样；
为什么使用计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护；所以，对于任何复杂逻辑，你都应当使用计算属性。
计算属性的基础
const app = new Vue({
el:'#app',
computed:{
自定义的属性名(){
// 业务逻辑处理
// 通过return 返回处理后的结果
return result;
}
}
})
计算属性传参
计算属性可以接受多个参数的，但是需要通过闭包的形式进行传递
const app = new Vue({
el:'#app',
computed:{
自定义的属性名(){
return function(params){
// 业务逻辑处理
// 通过return 返回处理后的结果
return result;
}
}
}
})
计算属性的setter 和 getter
计算属性默认只有getter属性， 如果需要，也可以手动设置setter
const app = new Vue({
el:'#app',
data:{
// data中必须定义一个变量进行接受set的值
msg:''
}
computed:{
自定义的属性名:{
set(value){
this.msg = value;
},
get(){
return this.msg
}
}
}
})
vue的过滤器 filter
自定义过滤器，可被用于一些常见的文本格式化处理
过滤器的使用场景
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号 | 指示
过滤器的基础
过滤器默认接受的参数就是要处理的数据， 其实就是过滤器前边的数据（data中的key）
- 定义过滤器
// 定义过滤器
const app = new Vue({
el:'#app',
data:{
msg:'hello vue'
},
filters:{
自定义的过滤器名字(value){
// 业务逻辑处理 value
// 通过return 返回处理后的结果
return result;
}
}
})
- 使用过滤器
<标签名> {{msg | 自定义过滤器名字}}</标签名>
过滤器传参
过滤器可以接受多个参数: 第一个参数是要处理的数据，后边的参数就是传递的参数
- 定义过滤器 接受多个参数
// 定义过滤器
const app = new Vue({
el:'#app',
data:{
msg:'hello vue'
},
filters:{
自定义的过滤器名字(value, arg1, arg2, ...){
// 业务逻辑处理 value
// 通过return 返回处理后的结果
return result;
}
}
})
- 使用过滤器 传递参数
<标签名> {{msg | 自定义过滤器名字(value1, value2, ...)}}</标签名>
定义多个过滤器
定义多个过滤器，过滤器按照从左到右的顺序依次执行， 上一次执行的结果作为下一次执行的数据， 链式用法
- 多个过滤器
// 定义过滤器
const app = new Vue({
el:'#app',
data:{
msg:'hello vue'
},
filters:{
自定义的过滤器名字1(value, arg1, arg2, ...){
// 业务逻辑处理 value
// 通过return 返回处理后的结果
return result;
},
自定义的过滤器名字2(value, arg1, arg2, ...){
// 业务逻辑处理 value
// 通过return 返回处理后的结果
return result;
}
}
})
- 使用过滤器
多个过滤器之间使用管道符号|进行链接
<标签名> {{msg | 自定义过滤器名字1(value1, value2, ...) | 自定义过滤器名字2(value1, value2, ...)}}</标签名>
全局过滤器
全局过滤需要在vue的实例化之前进行定义; 全局过滤器定义在Vue对象上的
用法和局部过滤器用法一样
Vue.filter('自定义过滤器名字', (value) => {
// 逻辑处理
return result;
})
const app = new Vue({
el:'#app'
})
全局过滤器和局部过滤器重名问题：当全局过滤器和局部过滤器重名时，会采用局部过滤器。
vue的生命周期created
创建后自动执行的一个钩子函数；在组件创建后可以发起数据请求
const app = new Vue({
el:'#app',
data:{
msg:'hello vue'
},
created(){
// 可以在此处发起请求
axios.get().then(res => {})
}
})
560
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
