-
通过JS引入的方式 一般放在head标签里面 ，避免页面出现抖屏的情况
查看全部 -
本课内容查看全部
-
v-if 控制dom的存在与否
v-show 控制dom的显示与否
v-for 循环展示列表
查看全部 -
属性绑定：
v-bind:title="title"
简写为：(:title="title")
双向绑定：
<input v-model="content">
<div>{{content}}</div>
查看全部 -
computed：{ } 计算属性
watch：{ } 监听器
计算属性会使用上一次的缓存值，只有发生变化时才会改变。
查看全部 -
v-on 或者 @ 绑定事件
v-bind 或者 ： 绑定属性
v-model 双向数据绑定
查看全部 -
在Vue中，父组件向子组件传入值是通过属性的方式传入的。通过props来传入值
通过emit来将子元素上的事件传递给父级元素。
有点绕，可以看多两遍
查看全部 -
v-on:click="xxx" 或者 @click // 绑定事件
methods：{ //定义方法
xxx:function(){}
}
查看全部 -
每个组件都是一个Vue的实例。
如果不定义templates，那么会把挂载点内的所有标签当为templates
查看全部 -
<div id="root">{{msg}}</div>
<script>
new Vue({
el: "#root",
data: {
msg: "hellowword"
}
})
</script>
查看全部 -
使用Vue.component注册的属于全局组件，而直接用声明变量方式注册的属于局部组件。用全局组件会简单一点
如果想要在实例里面使用局部组件，则需要用components属性去声明一下。
查看全部 -
v-show 只是切换display的一个属性，div是不会被删除的，但是如果是用v-if去操作的话，整个div标签就会直接被去除。所以如果需要频繁的的切换标签展示状态，则用v-show
用v-for去渲染li标签时，需要绑定一个key属性，这样会加快渲染的速度，可以直接用item来作为他的值，key值不能相同，所以如果内容是相同的就不能直接用内容作为key值了，可以直接用index作为key值。但是如果需要对列表进行排序的变更的话，也不能用index。
v-for="(item,index) in list"
查看全部 -
组件的编写
查看全部 -
组件与实例的关系
实例外面定义组件，组件也可以说是一个实例vue项目中有vue
的实例组成的，组件中也可以写方法
若vue实例没模板对于根实例来说找到挂载点，把挂载点下的内容当做模板
查看全部 -
v-if，v-show与v-for指令：
1.v-if：当对应data中的值show是true时显示，为false，则把这个标签就移除。
v-if 和 v-show 用处
1.v-show 不会像 v-if 每次销毁再重新创建，v-show 性能相对v-if 高一些；
2.如果标签显示的频率不是那么大，只需要做一次显示或者隐藏，这时候用 v-if 是一个更好的选择。
2.v-show：而当对应指令值为false时，div标签会隐藏，并不会像v-if那样被清除，只是把div标签的display属性变成none；
3.v-for：当有一个数据需要做循环展示时，帮助把每一条数据做循环，循环展示li标签；
1.添加:key=“ ”属性， 可以提升每一项渲染的效率和性能，每一项key值不能相同；
2.循环list数据列表，每一项内容放入item里面，每一项的下标都会放进index里面，:key 值用index；
3.如果不需要对列表进行排序，还有很多额外的操作，这时候用index是没有什么问题的；
4.如果频繁对列表进行变更，将不能使用index，因为index是存在问题的，具体是什么问题自己查阅一下。
课程代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>v-if，v-show与v-for指令</title> <script src="./vue.js"></script> </head> <body> <div id="root"> <div v-show="show">Hello World</div> <button @click="handleClick">toggle</button> <ul> <li v-for="(item,index) of list" :key="index">{{ item }}</li> </ul> </div> <script> new Vue({ el: "#root", data: { show: true, list: [1, 2, 3] }, methods: { handleClick: function() { this.show = !this.show; } } }); </script> </body> </html>查看全部
举报