-
因为有数据的改变要在methods里面定义，这里的push相当于对data里的list数组添加数据，添加的数据来源于input的value值=data里面的inputValue值。
查看全部 -
这里的this.content等于实例data里的content。 当值要发生变化时在methods里面进行函数定义。查看全部 -
页面内容过于复杂，可将组件拆分，可定义全局组件或局部组件：
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）这样写
查看全部 -
v-if="data下的数值"；是将元素删除再添加的操作
v-on ==@ +click:点击事件，事件定义在methods中
v-show:是将元素的display属性至于none性能更高
v-for="item of list": item与标签里{{item}}保持一致，list：是实例data下的list数组，这种写法要保证数组内不存在重复的数值。若存在重复则可以（item,index）这样写
查看全部 -
template :写模型的
computed:{方法}；一个属性通过其他属性计算而来，
watch:{
key的值与data中key值相对应：function()
};侦听器
查看全部 -
v-bind == : 绑定属性
v-on == @ 绑定事件
v-model 数据双向绑定
{{实例里data下的key值}}
查看全部 -
computed 计算属性
computed:{
fullname： function（）{
return this.fristname + this .lastname
}
}
2. watch（监听data和computed里的值的变化做相应的业务逻辑处理
watch:{
fullName:function(){
this.count ++
}
}
查看全部 -
v-bind(缩写":")单项属性绑定：
根据vue实例中data属性，与其中对象的key值相绑定，可修改相应属性的数据
v-model:双向绑定：
div中某一个标签的值发生变化后，可以改变vue实例中data属性相应的对象值，反之相同；
查看全部 -
vue对象属性：.....
el：绑定标签，
data：数据，
methods：定义方法；
template：模板
｛｝｝叫做插值表达式
v-text与v-html的区别
v-on:click 简写是“@”
v-text 会进行转译
v-html 不会进行转译
查看全部 -
挂载点，模版，实例之间的关系
挂载点：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：侦听器查看全部
-
v-text 会进行转译
v-html 不会进行转译
v-on:click="xxx" 或者 @click // 绑定事件 相当于html的class跟id
vue对象属性：
el：绑定标签，
data：数据，
methods：{ //定义方法
xxx:function(){}
}
template：模板
{{number}}：插值表达式，也就是把number的值插入到h1之中；
v-text="number"：h1的内容由number这个变量决定，v-text是Vue中的一个指令，
这个指令里面的东西跟着的是一个变量，它告诉h1显示的内容就是"number"这个变量；
v-html="c ontent"：v-html与v-text的区别是，v-html不会转义，而v-text会转译；
v-on:click="handleClick"：通过v-on给元素绑定一个Click事件，事件触发方法。
v-on:click的简写方法：@click
Vue中的属性绑定和双向数据绑定
v-bind：属性绑定。缩写为冒号 : (:title)
v-model：双向数据绑定，随着数据的修改与之对应的也会修改。
computed：{ } 计算属性
watch：{ } 监听器
v-if，v-show与v-for指令：
1.v-if：当对应data中的值show是true时显示，为false，则把这个标签就移除。
2.v-show：而当对应指令值为false时，div标签会隐藏，并不会像v-if那样被清除，只是把div标签的display属性变成none；
3.v-for：当有一个数据需要做循环展示时，帮助把每一条数据做循环，循环展示li标签；
每个组件都是一个实例，每个vue实例都是一个组件
Vue.component 注册全局组件
例：Vue.component('todo-item',{
template:'<li>item</li>'
})
局部组件
var TodoItem = {
template:'<li>item</li>'
}
new Vue({
el:"xxx", //挂载点
components:{ //申明
'todo-item':TodoItem
}
})
单文件组件的template模板中，只能有一个外层<div>，其它应该都在这一层<div>里
单文件组件的script中，data不是{}数据形式，是function()函数形式，return返回值是{}数据
查看全部 -
计算属性:
computed: 数据带缓存,因数据改变而改变;
监听器:
watch: 动态监控数据改变,然后进行某些操作
查看全部
举报