-
<div>
<todo-item v-for="(item, index) of list" :key="index" :content="item"></todo-item>
</div>
全局组件
Vue.component('todo-item', {
props:['content'], //接收content这个参数
template:"<li>{{content}}</li>"
})
局部组件
var TodoItem = {
template:"<li>item</li>"
}
new Vue({
el:"#root",
data:{},
components:{ //在vue实例里面要先用components注册这个组件
todo-item:TodoItem
},
methods:{}
})
查看全部 -
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
<li v-for="(item, index) of list" :key="index">
<li v-for="(item, index) of list" :key="index">
var vue = new Vue({
el:"#root",
data:{
inputValue:'hello',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
查看全部 -
基础知识->案例实践->todolist->vue-cli->todolist
查看全部 -
绑定事件 v-on: ，触发的方法和vue实例的methods对应
v-on: 简写 @ （省略了v-on:）
在vue里面要改变数据的显示，不需要改变dom，只需要改变数据就行了。当数据发生变化时候，vue会自动更新dom
查看全部 -
vue只会处理挂载点里面的内容
在挂载点里面的内容都叫模板内容
new Vue({
el:"#root",
template:"<h2>{{msg}}</h2>",
data:{
msg:"hello world"
}
})
* vue会根据模板和数据生成最终的内容，放在挂载点之中
查看全部 -
计算属性 computed 是一些数据里没有的属性
侦听器 watch 当数据发生变化时，开始被侦听
查看全部 -
v-show不会每次都创建dom，所以性能高一些
用v-for的时候，记得加上:key="index"，提升每一项渲染的效率性能
查看全部 -
创建vue实例，注意位置和标签的匹配
查看全部 -
在data中配置任意数据名
{{number}}：插值表达式
v-text：是一个指令，他的内容可以调用{{number}}的变量
v-on：click 是点击事件指令，点击事件必须定义在methods事件下，简写的方法是@click
2. methods：事件需要放在这个方法里面
查看全部 -
挂载点：指Vue实列中el后面的ID
模板：在挂载点内部的内容都叫模板内容
template：可以放各种标签与smg申明
查看全部 -
el：指与id做绑定
data：用于放数据
msg：用户放具体数据
查看全部 -
v-model：双向数据绑定，随着数据的修改与之对应的也会修改。
<div id="root"> <div :title="title">hello world</div> <input v-model="content" /> <div>{{content}}</div> </div> <script> new vue({ el:"#root", data:{ title:"this is hello world", content:"this is content" } }) </script>查看全部 -
插值表达式：
v-text指令：
v-html指令：
v-text和v-html的区别：
v-html不会将输出内容进行转义，而v-text会。
v-on：绑定事件
绑定事件的简写：
v-on:click——>@click
查看全部 -
挂载点，模板，实例之间的关系：
挂载点：el中的值对应了某dom节点的id值，这个dom节点就是挂载点
模板：在挂载点下面的所有内容都是模板 【模板不仅可以写在挂载点下，还可以写在vue实例中，如图：
】
实例：指定挂载点，然后写上模板，vue会自动结合模板和数据，生成展示内容，最后将内容放在挂载点下
查看全部 -
vue与传统js的对比
查看全部
举报