-
el：——挂载点，用于与相应的标签绑定
data：——vue的数据存放处
查看全部 -
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item
v-for="(item, index) of list"
:key="index"
:content="item"
>
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item', {
props: ['content'],
template: '<li>{{content}}</li>'
})
new Vue({
el:"#root",
data: {
inputValue: '',
list: []
},
methods: {
handleSubmit: function() {
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>
查看全部 -
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<li v-for="(item, index) of list" :key="index">
{{item}}
</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
inputValue: "hello",
list: []
},
methods: {
handleSubmit: function(){
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>查看全部 -
<div id="root">
<div v-show="show">hello world</div>
<button @click="handleClick">toggle</button>
<ul>
<li v-for="(item, index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data:{
show: true,
list: [1, 2, 3]
},
methods:{
handleClick:function(){
this.show = !this.show
}
}
})
</script>
查看全部 -
<div id="root">
姓：<input v-model="firstName"/>
名：<input v-model="lastName"/>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el: "#root",
data:{
firstName:'',
lastName:'',
count:0
},
computed:{
fullName:function(){
return this.firstName+ '' + this.lastName
}
},
watch:{
fullName:function(){
this.count ++
}
}
})
</script>
查看全部 -
<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>
查看全部 -
<div id="root">
<div @click="handleClick">{{content}}<div/>
</div>
<script>
new Vue({
el: "#root",
data: {
content: "hello",
number:123
},
methods:{
handleClick:function(){
this.content = "world"
}
}
})
</script>
查看全部 -
computed：只有在计算属性所依赖的值发生改变时，才会重新计算；如果所依赖的值未发生改变，它会根据之前缓存的计算结果在页面上显示，计算属性定义的函数需要又return值作为计算属性的新的结果
watch：侦听器，侦听某个data中的属性值或者计算属性值，当他们发生改变之后，就会执行定义好的业务函数
查看全部 -
属性绑定：v-bind
双向数据绑定：v-model
查看全部 -
实现循环列表功能
先创建list列表，然后在挂载点创建ul，在li里写上v-for=“item of list”，意思是循环list，每次循环，把list里面的循环项内容放入item里面
每次用v-for这个属性时，最好在list”后面加上 ：key=“item”，增加效率
当list列表有重复的，如：【1,1,3】，则要v-for（item，加上index），把key后面的item换成index。 index为item的下标。
查看全部 -
v-if和v-shou的区别
结果都是可以用show的true和falus显示和隐藏div
v-if当数据项show为falus时，会把挂载点处的div移除，而v-show是把挂载点的div用display：none隐藏起来
用哪种好？
：当需要处理的数据量庞大时，用v-show好，因为他不需要像v-if那要把div销毁后再创建，只需要把div隐藏就行。
：当数据量较小时，则用v-if
查看全部 -
计算属性：computed
侦听器：watch 用的count计算，开始为0，计算firstname和lastname合计的fullname，每次在input输入框每进行一次输入，count+1.
查看全部 -
head里面加载vue
<script src="./vue.js"></script>
实例格式：
<script>
new Vue({
el:"#某id",
template: //挂载点格式可写在这
data:{
msg:"hello"
}
})
</script>
挂载点里面：如 <div v-on:click....></div>
v-text="msg" //接收实例里面data的文本，写法一
{{msg}} //接收实例里面data的文本，写法二，插值法
v-on:click="xxx" //点击后执行 可简写成@click="xxx" v-on=@
title="this is hello world" //当鼠标放到div上时，会有提示 this is hello world
进阶用法： v-bind:title="msg" //v-bind 数据绑定 句子意思是title属性和msg这个数据项绑定 “”里面其实是一个js表达式，意味着可以在里面添加js的内容 可简写成：title="msg" v-bind=:
v-model //数据的双向绑定 如 <input v-model="msg"/> 这样在页面文本框中修改框内的值，实例data里面的数据项msg的值也会跟着改变
实例里面：
methods:{
xxx:function(){
alert("") //点击后显示
this.msg = "" //点击后改变msg的值，也就完成了点击后改变文字的效果
}
}
查看全部 -
每一个组件都是vue的一个实例
查看全部 -
全局组件和局部组件
组件需要props接收参数
查看全部
举报