-
data (){
return {
inputValue: ''
}
}
查看全部 -
v-if：把标签从DOM树中移除，是摧毁与重建过程；
v-show：改变css属性为display:none，只是视觉上的隐藏；如果显示与隐藏操作频繁，建议使用v-show
查看全部 -
<li v-for="(item, index) of list" :key="index">{{item}}</li>
用index序号来保证每一个key值是不一样
查看全部 -
挂载体，模版，实例 1. Vue 实例绑定的dom 元素 2. Dom 元素内的内容 3. 创建的 vue 实例查看全部
-
{{msg}}：插值表达式查看全部
-
<div id="root">
<!--事件绑定--> <!-- v-on:简写 @ -->
<h1 @click="handleClick"><!--插值表达式 {{number}}--> {{content}}</h1>
</div>
<script>
new Vue({
el:"#root",
data:{
content:"哈哈哈"
},
<!--方法定义-->
methods:{
handleClick:function(){
this.content="呵呵呵";
}
}
})
</script>
</body>
查看全部 -
第二章总结：
创建实例
挂载点 模板 实例的关系
事件绑定：@click="headleClick" ； 绑定方法：数据里面的methods；表达方式v-text和v-htm
属性绑定：v-bind或者：表示 ；双向绑定：v-model
计算属性：computed 返回（return）一个值；侦听器 watch
v-if和v-show相似 v-show更稳定，都是隐藏和展示指令；v-for是循环展示指令
查看全部 -
父子组件这么交互的
查看全部 -
<!--scope将样式设定作用域，如果不添加scope，则样式会应用到全局，加了则只影响该组件-->
<style scoped>
.item{
color: blueviolet
}
</style>
查看全部 -
<!DOCTYPE html>
<html lang="en">
<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>
查看全部 -
vue-cli的作用域，在组件的style标签中添加scoped，可以使得该样式只对这一个组件有效
查看全部 -
1.template模板下只能有一个最外层的包裹元素
查看全部 -
Vue中的每个组件都是vue的实例
如果vue的实例没有模板，找到挂载点（root），把挂载点的div标签下的所有内容当做实例的模板来使用。如果不定义模板，他会使用dom标签的的内容作为实例的模板。
查看全部 -
实例只能处理挂载点下面的内容（div内）
查看全部 -
写vue代码更着重于编写数据层的处理操作，减少dom的操作
查看全部
举报