-
页面内容过于复杂，可将组件拆分，可定义全局组件或局部组件：
1、全局组件：在页面任何地方都能使用
//定义全局组件
Vue.component("todo-item", {
template: "<label>我是全局组件</label>"
});
new Vue({
el: "#root",
});
//使用全局组件
<div id="root">
<todo-item></todo-item>
</div>
2、局部组件：要在外层Vue实例里进行注册
//定义局部组件
var todoItem = {
template: "<label>我是局部组件</label>"
}
new Vue({
el: "#root1",
components: { //局部组件：要在挂载点(它的外层Vue实例，即此处的root1)进行注册
"todo-item-1": todoItem
}
});
//使用局部组件
<div id="root1">
<todo-item-1></todo-item-1><!--局部组件：只能在挂载点底下使用-->
<todo-item></todo-item><!--全局组件：在页面任何地方都能使用-->
</div>
组件拆分之后的传参问题：外部(html页面)可以通过自定义属性的形式传参，组件要定义props[]接收属性
//父组件向子组件传递数据：通过属性
Vue.component("todo-item-2", {
props: ["content", "index"],//接收从外部传进来的属性content、index
template: "<li>{{index+1}}、{{content}}</li>"
});
new Vue({
el: "#root2",
data: {
inputValue: "",
list: []
},
methods: {
submitClick: function () {
this.list.push(this.inputValue);
this.inputValue = "";
}
}
})
<div id="root2">
<div>
<input v-model="inputValue" />
<button @click="submitClick">提交</button>
</div>
<ul> <!--自定义属性content、index-->
<todo-item-2 v-for='(item,index) of list'
:key="index"
:content="item"
:index="index"
>
</todo-item-2>
</ul>
</div>
笔记来自哈尔波儿
查看全部 -
v-if="data下的数值"；是将元素删除再添加的操作
v-on ==@ +click:点击事件，事件定义在methods中
v-show:是将元素的display属性至于none性能更高
v-for="item of list": item与标签里{{item}}保持一致，list：是实例data下的list数组，这种写法要保证数组内不存在重复的数值。若存在重复则可以（item,index）这样写
查看全部 -
挂载点，模版，实例之间的关系
挂载点：el属性(#root)对应后面id(id="root")所对应的节点；
模版： 指的是挂载点内部，也可以写在实例里面template属性里面;
实例：Vue会结合模版和数据生成最终要展示的内容，然后把它放在挂载点之中。
查看全部 -
<script src="js/vue.js"></script>放在head标签之间，避免抖屏。
new Vue（{
el: "id",//引用id
注意vue实例里不同属性用逗号隔开
data: {
msg: "hello world"
}
}）创建vue实例
通过插值表达式{{}}引用vue实例里面的内容
查看全部 -
v-on：@绑定事件 v-bind: :绑定属性 computed：计算属性 watch：侦听器查看全部
-
挂载点、模板与实例之间的关系
挂载点：也就是Vue实例中el属性对应的id的dom节点，Vue只会处理挂载点的内容。
模板：挂载点内部的内容都称作模板内容，其中模板还可以放置在Vue的实例中进行编写，如果使用Vue实例方式，则需要使用标签把数据抱起来。
实例：实例需要指定挂载点，还可以指定模板和数据，并且Vue会自动结合模板和数据进行展示。
查看全部 -
v-bind(缩写":")l:单项属性绑定；根据vue实例中data属性，与其中对象的key值相绑定，可修改相应属性的数据
v-model:双向绑定；div中某一个标签的值发生变化后，可以改变vue实例中data属性相应的对象值，反之相同；
查看全部 -
v-if 控制dom的存在与否
v-show 控制dom的显示与否
v-for 循环展示列表
查看全部 -
v-on 或者 @ 绑定事件
v-bind 或者 ： 绑定属性
v-model 双向数据绑定
查看全部 -
使用Vue.component注册的属于全局组件，而直接用声明变量方式注册的属于局部组件。用全局组件会简单一点
如果想要在实例里面使用局部组件，则需要用components属性去声明一下。
查看全部 -
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>查看全部 -
1.计算属性(computed:)：一个属性通过其他属性计算而来
好处：
（只有它依赖的数据发生变化的时候，它才会重新计算；如果依赖的属性没有发生变化，它会利用以前计算结果的缓存来在页面上做显示）
2.侦听器(watch)：指的是监听某一个数字发生了变化，然后就在监听器里面做业务逻辑，
侦听器watch：监测某一个数据或计算属性发生了变化，一旦这个数据发生了变化，就在该侦听器内写入业务逻辑
注：watch不仅可以监听vue实例的data内属性，而且可以监听计算computed下计算属性的变化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>计算属性与侦听器</title> <script src="./vue.js"></script> </head> <body> <div id="root"> 姓：<input v-model="firstName" /> 名：<input v-model="lastName" > <div>{{fullName}}</div> <div>{{count}}</div> </div> <script> new Vue({ el: "#root", data: { firstName: '', lastName: '', count: 0 }, computed: { fullName: function() { return this.firstName + ' ' + this.lastName } }, watch: { firstName: function() { this.count ++} } }); </script> </body> </html>查看全部 -
Vue中的属性绑定和双向数据绑定
v-bind：属性绑定。缩写为冒号 : (:title)
v-model：双向数据绑定，随着数据的修改与之对应的也会修改。
课程代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>属性绑定和双向数据绑定</title> <script src="./vue.js"></script> </head> <body> <div id="root"> <div :title="title">hello world</div> <input v-model="content" /> <div>{{ content }}</div> </div> <script>new Vue({ el: "#root", data: { title: "this is hello world", content: "this is content" } }); </script> </body> </html>查看全部 -
<!-- 挂载点，模版，实例之间的关系 ->
挂载点：el属性(#root)对应后面id(id="root")所对应的节点；
模版： 指的是挂载点内部，也可以写在实例里面template属性里面;
实例：Vue会结合模版和数据生成最终要展示的内容，然后把放在挂载点之中。
查看全部 -
v-bind：属性绑定。可以缩写:
v-model:双向数据绑定，随着数据的修改与之对应的也会修改
查看全部
举报