Vue基础起步
一 、用vue实现helloworld
代码
<div id="app">{{content}}</div>
<script>
var app = new Vue({
el:"#app",
data:{
content:"hello world"
}
})
</script>复制代码浏览器效果如下
知识点
使用vue时，应该用 new Vue 创建一个vue实例，此处用app来接收这个实例
el是指定Vue实例绑定哪个dom标签，就是说vue的操作范围是在哪个标签之内比如我现在把代码改为如下
<div id="app">{{content}}</div> <div>{{content}}</div> <script> var app = new Vue({ el:"#app", data:{ content:"hello world" } }) </script> 复制代码浏览器效果如下
可以看到只要超出了div#app的范围，vue就不会去渲染数据
vue是数据绑定是通过
{{名字}}实现的，可以渲染出data{名字：数据}中的数据vue的好处是免去了dom的操作，我们只需要在数据上逻辑上做文章即可
比如我们现在用原生js去实现上面的功能
<div id="app"></div> <script> var app = document.getElementById("app"); app.innerHTML = "hello world", </script> 复制代码vue是响应式的，只要数据一变化，视图 数据就会重新渲染
var app = new Vue({ el:"#app", data:{ content:"hello world" } }) setTimeout(function(){ app.$data.content="Bye world!" },1000)复制代码我们会看到，一秒之后，浏览器中出现了变化
注意
只有data中原本存在的属性被更新时，vue才会重新渲染，如果是
app.$data.a=3后续添加data原本不存在的属性与值，vue是不会响应的Object.freeze(data)这样就会阻止修改限有的属性
二、用vue实现一个简易toDoList
所用知识点如下
v-model可以实现数据的双向绑定，dom中的数据可以影响到vue实例，vue实例的数据可以影响到dom的数据
<input type="text" v-model="inputValue">//vue中的datadata:{ inputValue:''}复制代码data中的inputValue和v-model中的inputValue 会同时变化，其中一个变化，另一个也跟着变化
v-for="item in list"v-for会去遍历data中的list，item代指每一项$表示Vue实例所拥有的属性和方法，此外还有$.el,$watch。。。methods所有的事件都写在methods对象中，v-on:事件="事件函数"<button v-on:click="btnClick">提交</button> new Vue({ methods:{ btnClick:function(){ this.list.push(this.inputValue); this.inputValue=""; } } })复制代码
好了现在把代码和效果贴上来喽
<div id="app">
<input type="text" v-model="inputValue">
<button v-on:click="btnClick">提交</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
list:[],
inputValue:''
},
methods:{
btnClick:function(){
this.list.push(this.inputValue);
this.inputValue="";
}
}
})
</script>复制代码效果图
使用组件改造todoList
知识点
全局组件的使用
Vue.component('todoList',{})用来注册一个名字叫todoList的全局组件，{}是要传进去的参数，注意 todoList在html中要写作todo-listVue.component('todoList',{ props:['content']， template:'<li>{{content}}</li>' })复制代码props:['content']，用来接收父组件传递的值template:''，必填，展示模板的内容，注意千万不能写
<li>this.$data.content</li>，会报错，而要写成<li>{{content}}</li>
html
<todo-list v-bind:content="item" v-for="item in list"></todo-list>复制代码v-bind:名字=“值” v-bind可以用来绑定数据，这里是v-for遍历父组件的list数据，用content来接收父组件的list中每一项（item）的值
综上 在组件中中，用props:[‘content’] 来接受父组件的传值
代码如下
<div id="app"> <input type="text" v-model="inputValue"> <button v-on:click="btnClick">提交</button> <ul> <!-- <li v-for="item in list">{{item}}</li> --> <todo-list v-bind:content="item" v-for="item in list"></todo-list> </ul> </div> <script> Vue.component('todoList',{ props:['content'], template:'<li>{{content}}</li>' }) var app = new Vue({ el:"#app", data:{ list:[], inputValue:'' }, methods:{ btnClick:function(){ this.list.push(this.inputValue); this.inputValue=""; } } }) </script>复制代码子组件的使用
形式跟父组件一样
只不过写法不同
var todoList = { props:['content'], template:'<li>{{content}}</li>' }, //在vue的实例中 new Vue({ components:{ todoList:todoList } })复制代码
三、父子组件的简单传值
我们要实现一个功能，点击列表信息时，删除该信息
效果如下
小知识点
v-on:click可以缩写为@click
v-bind:可以缩写为:bind
代码
var todoList = {
props:['content',"index"],
template:'<li @click="deleteItem">{{content}}</li>',
methods:{
deleteItem:function(){
this.$emit("delete",this.index);
}
}
}复制代码在
template中加入点击事件@click="deleteItem"然后我们在子组件的
methods加入一个点击事件函数deleteItememit可以用来触发父组件自定义的事件,第一个参数是自定义事件的名字， 后面的参数可以传参给父组件
父组件引用子组件的html代码
<todo-list :content="item" :index="index" v-for="(item,index) in list" @delete="handleDeleteItem"></todo-list>复制代码@delete是父组件自定义的事件，当点击子组件时，子组件会自动触发该自定义事件，并把参数传过去
父组件的Vue实例中
new Vue({ methods:{ handleDeleteItem:function(index){ this.list.splice(index,1); } } })复制代码index就是子组件中
$emit('delete',this.index)中的this.index传过来的参数
全部代码如下
<div id="app">
<input type="text" v-model="inputValue">
<button v-on:click="btnClick">提交</button>
<ul>
<todo-list
:content="item"
:index="index"
v-for="(item,index) in list"
@delete="handleDeleteItem"></todo-list>
</ul>
</div>
<script>
var todoList = {
props:['content',"index"],
template:'<li @click="deleteItem">{{content}}</li>',
methods:{
deleteItem:function(){
this.$emit("delete",this.index);
}
}
}
var app = new Vue({
el:"#app",
components:{
todoList:todoList
},
data:{
list:[],
inputValue:''
},
methods:{
btnClick:function(){
this.list.push(this.inputValue);
this.inputValue="";
},
handleDeleteItem:function(index){
this.list.splice(index,1);
}
}
})
</script>复制代码结语
因为本人水平有限，如果有错漏的地方，还请看官多多指正
本文作者胡志武，写于2019/5/11，如果要转载，请注明出处，
如果觉得写的不错， 请点个赞吧