-
单项绑定是指的，数据可以决定页面显示内容，而页面显示内容无法修改数据。
双向数据绑定是指的，数据可以用于页面显示，同时页面显示和相关控件操作值也可以修改内存数据。
查看全部 -
指令v-on缩写是 " @ "
指令v-bind缩写是 " : "
查看全部 -
使用模板指令v-bind之后所被绑定的属性就变成了js表达式了。
查看全部 -
模板也可以在vue实例中template属性中书写。
查看全部 -
挂载点内部的html代码，都可以称之为模板。
查看全部 -
挂载点就是vue新建实例参数中的el属性的值。
查看全部 -
挂载点：vue只会处理相应挂载点下面的子元素相关操作。
查看全部 -
模板 就是挂载点里的内容
查看全部 -
<div id="root">
<div id="">
<input type="" v-model='input' />
<button type="button" @click="handclick">提交</button></div>
<ul>
<li v-for="(item ,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el: "#root",
data: {
input: '',
list: []
},
methods: {
handclick: function() {
if (this.input == "") {alert("内容不能为空")
} else {
this.list.push(this.input),
this.input = ""
}
}
}})
</script>查看全部 -
每一个组件都是一个VUE的实例
查看全部 -
全局安装vue-cli
npm install --global vue-cli
创建一个基于webpack 的项目 my-project
vue init webpack my-project
安装项目依赖
cd my-project
npm run
查看全部 -
子组件定义、接收参数、向父组件传递事件
查看全部 -
父组件删除元素
查看全部 -
父组件向子组件传参
父组件监听子组件事件
查看全部 -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleClick">提交</button>
</div>
<ul>
<todo-list
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
></todo-list>
</ul>
</div>
<script>
Vue.component('todo-list',{
props:['content','index'],
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
this.$emit('delete',this.index)
}
}
})
// var TodoItem={
// template:'<li>item</li>'
// }
new Vue({
el:"#root",
data:{
inputValue:"hello",
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue);
this.inputValue="";
},
handleDelete:function(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>
查看全部
举报