-
关于：$emit
1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。
vm.$emit( event, arg ) //触发当前实例上的事件
vm.$on( event, fn );//监听event事件后运行 fn；
splice(index,len,[item])它也可以用来替换/删除/添加数组内某一个或者几个值（该方法会改变原始数组）
index:数组开始下标
len: 替换/删除的长度
item:替换的值，删除操作的话 item为空
删除：
//删除起始下标为1，长度为1的一个值(len设置1，如果为0，则数组不变)
var arr = ['a','b','c','d'];
arr.splice(1,1);
console.log(arr);
//['a','c','d'];
//删除起始下标为1，长度为2的一个值(len设置2)
var arr2 = ['a','b','c','d']
arr2.splice(1,2);
console.log(arr2);
//['a','d']替换：
//替换起始下标为1，长度为1的一个值为‘ttt’，len设置的1
var arr = ['a','b','c','d'];
arr.splice(1,1,'ttt');
console.log(arr);
//['a','ttt','c','d']
//替换起始下标为1，长度为2的两个值为‘ttt’，len设置的1
var arr2 = ['a','b','c','d'];
arr2.splice(1,2,'ttt');
console.log(arr2);
//['a','ttt','d']添加：
//在下标为1处添加一项'ttt'
var arr = ['a','b','c','d'];
arr.splice(1,0,'ttt');
console.log(arr);
//['a','ttt','b','c','d']查看全部 -
计算属性
computer
计算属性会缓存数据，性能比较高。如果使用的数据没有改变，就会使用上次计算的缓存不会重新计算结果
侦听器
watch 检测某个值发生了变化，侦听某一个数据或者计算属性是否变化
count++ 记录的是一次操作，不是计算输入的内容数量。
查看全部 -
属性绑定
v-bind 模板指令 可简写成 : 当前属性和谁绑定，在页面中显示出来的数据是一样的
双向绑定
v-model
查看全部 -
在数据项（data）l里我们可以配置任意的数据名字
{{msg}},这种表式方法叫做插值表达式
v-text=“”vue指令 ； v-html =“”指令 里跟的是变量
<h1 v-text="msg"></h1>表示h1他的内容由msg这个变量决定
v-text 模板指令 有转译特性会把变量要展示出来的内容转译，直接在页面中表现出看来，
v-text 模板指令 不会转译
绑定事件
v-on 模板指令可简写成 @ 给某一标签绑定约个事件
例： <div v-on:click="函数">{{content}}</div>
给div标签绑定一个点击事件
函数定义在vue实例里methods 属性里面
查看全部 -
每一个组件都是Vue实例
查看全部 -
挂载点 = 标签
实例 = 新的vu而应用点
模板 = 挂载点内部的内容
模板可以写在挂载点内部也可以写在实例里面 template 属性里面
实例需要绑定一个挂载点，然后写上模板，vue会自动的做一些事情（原生js/jquery里的demo操作）自动结合你的模板和你的数据生成最终要展示的内容，然后把这个内容放在你的挂载点里
??
查看全部 -
挂载点，模板，实例之间的关系
模板指的是挂载点内部的内容：可以写在挂载点里面、也可以写在实例的template属性里面；
实例：就是指的vue的new Vue({
})
查看全部 -
<!--v-show是改变div标签中的style属性值display：none。适合多次显示隐藏，性能更高-->
<!--v-if是将hello world从div标签中删除然后在新增-->
查看全部 -
v-bind:的作用和：的作用是一样的。
查看全部 -
将用<script>引用的vue放在head中，可以避免抖屏的现象查看全部 -
子组件和父组件通信 发布订阅方式查看全部
-
在 <style> 标签上加scoped
<style scoped></style>
给样式加上作用域，该样式只作用于该组件，
查看全部 -
v-for是遍历的指令 item in items 渲染 ：key绑定id
查看全部 -
v-if是删除创建元素 适合页面一次性的操作
v-show是display为none和block的操作 适合频繁的操作
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="demo1">
<input v-model="add"/>
<button @click="showTime">提交</button>
<ul>
<todo_item v-for="(todo,index) of todoList"
:key="index"
:content="todo"
:index="index"
@delete="handleDelete">
</todo_item>
</ul>
</div>
</body>
<script>
/**
整个todoList删除流程
1.div设置index下标
2.调用子组件的点击事件
3.向div发布监听事件delete并传递被点击的值的index
4.div获取到该事件后调用父组件的handleDelete方法
5.调用父组件的handleDelete方法执行删除操作
*/
//子组件（todo_item）
Vue.component('todo_item',{
//接收由div传递过来的content和index绑定参数
props:['content','index'],
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
//当当前li被点击时，发布一个事件，事件名字是delete，参数是this.index
//该事件被div中设置的@delete="handleDelete"绑定事件监听到之后执行父子件的handleDelete方法
this.$emit('delete', this.index);
}
}
})
new Vue({
el:"#demo1",
data:{
add:'',
todoList:[]
},
methods:{
showTime:function(){
this.todoList.push(this.add) ;
this.add='' ;
console.log(this.todoList) ;
},
handleDelete:function(index){
//该方法作用是，删除掉todoList中下标为index的元素，1代表删除1个值
this.todoList.splice(index,1) ;
}
}
})
</script>
</html>
查看全部
举报