-
<todo-item v-for="(item,index) of list":key="index":content="item"></todo-item>//使用全局组件
Vue.component('todo-item',{
props:['content'],//外层传递了content组件，内层要接收一下才能用=这个组件接收从外面传进来名字叫content的属性。一旦外面进行接收，就可以用了
template:'<li>{{content}}</li>'//模板注册了组件
})//Vue.component全局组件
var TodoItem={
template:'<li>{{content}}</li>'//模板注册了组件
}//局部组件
new Vue({
el:"#root",
components:{//如果要使用局部组件需要components对局部组件进行注册
'todo-item':TodoItem
}
data:{
inputValue:'',
list:[]
},
methods:{
handelSubmit:function(){
this.list.push(this.inputValue)
this.inputValue=''
}
}
})
查看全部 -
侦听器 watch
watch:{
fullName:function(){
this.count++
}
}
watch 监听属性。
查看全部 -
computed 指的是一个属性通过其他属性计算而来。如果fisrtName没改变，lastName没改变。fullName会使用上一次的值计算属性的缓存结果。
computed 计算属性
查看全部 -
数据双向绑定v-model
<input v-model="content"/>
<div>{{content}}</div>
<script>
new Vue({
el:"#root",
data:{
title:"this hello word title",
content:"this is content"
}
})
</script>
查看全部 -
当使用模板指令时，模板指令后面跟的是一个表达式eg:v-bind:title="title".
"title"变量指的是实例里面data里面的title变量。
v-bind:title一般用：title代替
查看全部 -
要改变content的内容不需要操作页面，只需要改变this.content的内容。
v-on给元素绑定事件。也可以把v-on：改成@
查看全部 -
style的作用域修饰符scoped，表示只在组件内有效
查看全部 -
1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。查看全部 -
单文件组件的template模板中，只能有一个外层<div>，其它应该都在这一层<div>里
单文件组件的script中，data不是{}数据形式，是function()函数形式，return返回值是{}数据
查看全部 -
0、安装node.js
官网下载对应的安装包
1、全局安装vue-cli
npm install --global vue-cli
2、在当前路径下创建一个基于webpack模板的项目
vue init webpack my-project
3、安装依赖
cd my-project
npm run dev
查看全部 -
全局注册
Vue.component('my-component-name', { // ... options ... })局部注册
var ComponentA = { /* ... */ }然后在
components选项中定义你想要使用的组件：new Vue({ el: '#app', components: { 'component-a': ComponentA, } })查看全部 -
v-if会清除（或创建）DOM标签，v-show隐藏（或显示）DOM标签
查看全部 -
计算属性 computed: {}
监听器 watch: {}
查看全部 -
事件绑定 v-on: 可简写成 @
属性绑定 v-bind: 可简写成:
双向绑定 v-model
查看全部 -
父子组件传值
查看全部
举报