-
创建vue实例通过new vue查看全部
-
Vue.js放在head里面可以防止抖屏查看全部
-
模板指令： v-text： v-html： v-bind（或：）：绑定 v-on（或@）：事件查看全部
-
一句话来说: key值是为了虚拟dom的比对 .
展开来说: 页面上的标签都对应具体的虚拟dom对象(虚拟dom就是js对象), 循环中 ,如果没有唯一key , 页面上删除一条标签, 由于并不知道删除的是那一条! 所以要吧全部虚拟dom重新渲染, 如果知道key为x标签被删除掉, 只需要把渲染的dom为x的标签去掉即可!
描述其实不是很详细, 其中还有dom比对的过程,不过大概的意思已经描述出来了!
查看全部 -
将vue.js文件放在<head>里面，可防止页面抖动。
vue如何控制页面元素：
new Vue({ el:"#id_name", data:{ msg:"hello world." }}), msg
页面上：<h2 id="id_name">{{msg}}</h2>
查看全部 -
课程大纲：
基础语法
案例：Totolist
构建工具Vue-cli的使用
查看全部 -
handleClick:()=>{ this.msg="world" //自动切换 }这个是无效的。因为箭头函数没有this的作用域
应用换成教程中的 function(){} 的匿名函数
查看全部 -
vue事例=vue组件
查看全部 -
v-for="(item,index) of list" :key="index" key的值不能相同
查看全部 -
v-if 移除dom
v-show 隐藏dom
查看全部 -
computed 计算属性，加入计算的任一项改变就会执行该函数，不改变不执行
watch 监听器
查看全部 -
1，页面引入js文件放在head里，防止抖屏。
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js" ></script>
<title>todoList</title>
</head>
<body>
<div id="root">
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<li v-for="(item, index) of list":key="index">
{{item}}
</li>
</ul>
<script>
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue)
alert('123')
}
}
})
</script>
</body>
</html>
alert能出来，为什么页面没效果？
查看全部 -
<todo-item v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"//在父组件设置一下下标以供子组件调用
@delete="handleDelete">//@delete监听子组件向外触发的delete事件,并执行自己的handleDelete方法
</todo-item>
Vue.component('todo-item',{
props:['content','index'],//index 调用父组件index下标
template:'<li @click="handleClick"></li>',
methods:{
handleClick:function(){
this.$emit('delete',this.index)//当子组件被点击的时候，需要通知父组件把数据删除。delete 是自定义事件，传递的值是index,通过this.index获取
}
}
})
new Vue(function(){
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handelSubmit:function(){
this.list.push(this.inputValue)
this.inputValue=''
},
handleDelete:function(index){//在方法里接收到传递过来的参数，即index下标
this.list.splice(index,1)//把父组件数组里对应下标的内容删除
}
}
})
查看全部 -
每一个vue的组件都是一个vue的实例。任何一个vue项目都是由千千万万个vue实例组成的。每个实例会包含props，template，methods，data。如果不定义模板，它会把root下的dome作为实例的模板
查看全部
举报