vuejs
挂载点:<div id="name"> vue会处理挂载点下的内容
模板:挂载点下的内容 template
实例:vue实例如下
new Vue({
el:"#root",
data:{
msg:"world",
},
methods:{
handle: function(){
}
}
})
v-text和v-html区别
v-html:能将html标签进行转义
v-text:会进行转义
点击事件:v-on:click=" "或@click
数据绑定:v-bind:title="属性名"或:title=" ",现在vue实例中定义所绑定的属性
双向数据绑定:v-model
计算属性:在Vue实例中定义computed:{ add:function(){ return this.a+this.b;} } (和react的reselect相似)
侦听器:在Vue实例中定义watch:{要监听属性名: function(){}}监听某一数据的变化做出相应处理
v-if:将元素从DOM树移除
v-show:不移除dom元素,只是添加display:none,性能更高
<v-for="item of list" :key=""> {{item}} :key提高渲染的效率,key唯一
功能todolist:
将数据添加到list list.push()
拆分组件
//全局组件
Vue,component('todo-item',{
prors:['content'] ,//传递参数
template:'<li>item</li>'
})
//引用
<todo-item :content="item"></todo-item>
//局部组件
var TodoItem = {
template:'<li>item</li>'
}
//在vue实例中定义
Vue.component:{
'todo-item': TodoItem
}
//引用
<todo-item></todo-item>
实例模板与组件
每个组件都是一个Vue实例
el标签:设置挂载点,将挂载点下的内容当成实例(template)
删除功能:通知父组件调用this.$emit('delete',this.index) @delete='handleDelete'
父组件通过属性方式向子组件传递数据
子组件发布事件给父组件
安装、使用vue-cli
创建基于webpack的vue项目:vue init webpack my-project
运行:npm run dev
在写组件数据时需将数据写成函数:
export default{
data () {
return {
value: ''
}
}
}
给样式添加作用域:<style scoped><style>
上一篇: Vue2.0学习笔记
下一篇: 图片压缩工具:uci