v-cloak
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
<script src="../vue.js"></script>
<script src="http://localhost:8080/resource/5s/vue.js"></script>
<style>
[v-cloak]{
display: none
}
</style>
</head>
<body>
<!--
v-cloak指令(没有值)
a 本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性
b 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
-->
<!-- 准备好一个容器 -->
<div id="root">
<div class="root">
<h2 v-cloak>{{name}}</h2>
</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
name:'xxx'
}
})
</script>
</body>
</html>
v-once
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
<script src="../vue.js"></script>
</head>
<body>
<!--
v-once指令
v-once所在的节点在初次动态渲染后,就视为静态内容了
以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能
-->
<!-- 准备好一个容器 -->
<div id="root">
<h2 v-once>初始值{{n}}</h2>
<h2>值{{n}}</h2>
<button @click='n++' >add</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
n:1
}
})
</script>
</body>
</html>
v-pre
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
<script src="../vue.js"></script>
</head>
<body>
<!--
v-pre指令
跳过所在节点的编译过程
可利用它跳过:没有使用指令语法,没有使用插值语法的节点,会加快编译
-->
<!-- 准备好一个容器 -->
<div id="root">
<h2 v-pre >不做插值语法</h2>
<h2>初始值{{n}}</h2>
<h2>值{{n}}</h2>
<button @click='n++' >add</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
n:1
}
})
</script>
</body>
</html>
自定义指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
<script src="../vue.js"></script>
</head>
<body>
<!--
v-once指令
v-once所在的节点在初次动态渲染后,就视为静态内容了
以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能
-->
<!-- 准备好一个容器 -->
<div id="root">
<h2 >当前的值是 <span v-text='n' ></span> </h2>
<h2>放大10倍后的n值时 <span v-big='n' ></span> </h2>
<button @click='n++' >add</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
n:1
},
directives:{
// big函数何时会被调用?指令与元素成功绑定时(一上来) 指令所在的模块被重新解析时
big(element,binding){
element.innerText=binding.value*10
}
}
})
</script>
</body>
</html>
回顾一个DOM操作 渲染先后问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
<script src="../vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<button id='btn'>点击创建输入框</button>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
const btn=document.getElementById('btn')
btn.onclick=()=>{
const input=document.createElement('input')
input.className='demo'
input.value=99
input.onclick=()=>{
alert(1)
}
document.body.appendChild(input)
input.focus()
}
</script>
</body>
</html>
自定义指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
<script src="../vue.js"></script>
</head>
<body>
<!--
v-once指令
v-once所在的节点在初次动态渲染后,就视为静态内容了
以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能
-->
<!-- 准备好一个容器 -->
<div id="root">
<h2 >当前的值是 <span v-text='n' ></span> </h2>
<h2>放大10倍后的n值时 <span v-big='n' ></span> </h2>
<button @click='n++' >add</button>
<input type="text" v-fbind:value='n' >
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
n:1
},
directives:{
// big函数何时会被调用?a 指令与元素成功绑定时(一上来) b 指令所在的模块被重新解析时
big(element,binding){
element.innerText=binding.value*10
},
// fbind(element,binding){
// element.value=binding.value;
// element.focus()
// }
fbing:{
// 指令与元素成功绑定时(一上来)
bind(element,binding){
element.value=binding.value
},
// 指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
// 指令所在的模板被重新解析时
update(element,binding){
element.value=binding.value
}
}
}
})
</script>
</body>
</html>
总结自定义指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
<script src="../vue.js"></script>
</head>
<body>
<!--
一、定义语法:
(1).局部指令:
new Vue({
new Vue({
directives:{指令名:配置对象}或
directives{指令名:回调函数}
})
})
(2).全局指令:
Vue.directive(指令名,配置对象）或 Vue.directive(指令名,回调函数)
二、配置对象中常用的3个回调:
(1).bind:指令与元素成功绑定时调用。
(2).inserted:指令所在元素被插入页面时调用。(3).update:指令所在模板结构被重新解析时调用。
三、备注:
1.指令定义时不加v-，但使用时要加v-;
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
-->
<!-- 准备好一个容器 -->
<div id="root">
<h2 >当前的值是 <span v-text='n' ></span> </h2>
<h2>放大10倍后的n值时 <span v-big='n' ></span> </h2>
<button @click='n++' >add</button>
<input type="text" v-fbind:value='n' >
</div>
<div class="root2">
<input type="text" v-fbind:value='x' >
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
// 定义全局指令
// Vue.directive('fbind2',{
// // 指令与元素成功绑定时(一上来)
// bind(element,binding){
// element.value=binding.value
// },
// // 指令所在元素被插入页面时
// inserted(element,binding){
// element.focus()
// },
// // 指令所在的模板被重新解析时
// update(element,binding){
// element.value=binding.value
// }
// })
Vue.directive('big',function(element,binding){
console.log('big',this)//此处的this是window
element.innerText=binding.value*10
})
new Vue({
el:'#root',
data:{
n:1
},
directives:{
// big函数何时会被调用?a 指令与元素成功绑定时(一上来) b 指令所在的模块被重新解析时
big(element,binding){
console.log('big',this)//此处的this是window
element.innerText=binding.value*10
},
// fbind(element,binding){
// element.value=binding.value;
// element.focus()
// }
fbing:{
// 指令与元素成功绑定时(一上来)
bind(element,binding){
element.value=binding.value
},
// 指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
// 指令所在的模板被重新解析时
update(element,binding){
element.value=binding.value
}
}
}
})
</script>
</body>
</html>
vue中style lang=“scss” scoped中的scoped
表示局部部署
没有的话里面的css样式会在所有组件中进行渲染
指令
v-bind 单项绑定解析表达式 可简写为 :xxx
v-model 双向数据绑定
v-for 遍历数组/对象/字符串
v-on 绑定事件监听,可简写为@
v-if 条件渲染(动态控制节点是否存在)
v-else 条件渲染(动态控制节点是否存在)
v-show 条件渲染(动态控制节点是否展示)
v-text指令
a 作用:向其所在的节点中渲染文本内容
b 与插值语法的区别 v-text会替换掉节点中的内容,{{xx}}则不会
vue中的三个缩写指令
v-on，监听指令，缩写：@，比如@click="doSomething"便是监听到点击事件后执行函数doSomething；
v-bind，动态绑定指令，缩写：:，比如:src="srcFilePath"其中srcFilePath是一个会动态变化的值，一般从后端获取；
v-slot，插槽指令，缩写：#，一般不使用缩写，可用于接收值然后在子组件中使用。
对象展开运算符
mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。但是自从有了对象展开运算符 (opens new window)，我们可以极大地简化写法：
computed: {
localComputed () { /* … */ },
// 使用对象展开运算符将此对象混入到外部对象中
…mapState({
// …
})
}
Getter
store的状态有时候需要进行一些计算筛选,通过Getter可以直接调用
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
Getter 接受 state 作为其第一个参数：
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: ‘…’, done: true },
{ id: 2, text: ‘…’, done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值：
store.getters.doneTodos // -> [{ id: 1, text: ‘…’, done: true }]
通过方法访问
你也可以通过让 getter 返回一个函数，来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。
getters: {
// …
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
store.getters.getTodoById(2) // -> { id: 2, text: ‘…’, done: false }
注意，getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。
mapGetters 辅助函数
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：
import { mapGetters } from ‘vuex’
export default {
// …
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
…mapGetters([
‘doneTodosCount’,
‘anotherGetter’,
// …
])
}
}
vue中$nextTick的用法(视图渲染完，操作dom)
在进行获取数据后，需要对新视图进行下一步操作或者其他操作时，发现获取不到dom。因为赋值操作只完成了数据模型的改变并没有完成视图更新
new Vue({
el: ‘#app’,
data: {
list: []
},
mounted: function () {
this.KaTeX parse error: Expected 'EOF', got '}' at position 46: …get() }) }̲, methods: { …http.get(’/api/article’).then(function (res) {
this.list = res.data.data.list
// ref list 引用了ul元素，我想把第一个li颜色变为红色
this.KaTeX parse error: Expected 'EOF', got '}' at position 67: … = 'red' }̲) }, } })…nextTick方法，如果我们想对未来更新后的视图进行操作，我们只需要把要执行的函数传递给this.$nextTick方法，vue就会给我们做这个工作。
$emit的用法
$emit的用法是将子组件的内容传递给父组件，包括：数据，方法等。
子组件
父组件传给子组件的数据：{{index}}
父组件
