1.简单的修改title属性
title就会变成xxoo
<div id="app">
<span v-bind:title="message">test</span>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message: 'xxoo'
}
})
</script>
2.销毁一个dom
sess所在的p标签会被删除
<div id="app">
<p v-if="seen">xxoo</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
seen:false
}
})
</script>
3.遍历数据
item是list下的其中一个数据
<div id="app">
<lo>
<li v-for="item in list">
{{item.text}}
{{item.text2}}
</li>
</lo>
</div>
var app = new Vue({
el:'#app',
data:{
list:[
{"text":"xxoo1","text2":"123"},
{"text":"xxoo2","text2":"1234"},
{"text":"xxoo3","text2":"1235"}
]
}
})
//添加一组数据到list下
app.list.push({"text":"xxoo4","text2":"123456"});
4.添加一个事件监听器
为button绑定了一个dian的方法
<div id="app">
<p>{{message}}</p>
<button v-on:click="dian">点击</button>
</div>
var app = new Vue({
el:'#app',
data:{
message:'hello change'
},
methods:{
dian:function(){
//处理逻辑
this.message = 'haha'
}
}
})
5.实现简单的双向绑定
input的值改变了,p标签里的文本也会改变
<div id="app">
<p>{{message}}</p>
<input v-model="message">
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'hello change'
},
})
</script>
6、定义一个组件
意思就是父单元把需要处理的工作交给了子单元
<div id="app">
<ol>
<!-- 创建一个todo-item组件的实例 -->
<!-- 为todo-item提供了一个xxoo的对象 -->
<todo-item
v-for="item in list"
v-bind:xxoo="item"
>
</todo-item>
</ol>
</div>
<script>
//定义一个名为todo-item的组件
Vue.component('todo-item',{
//定义一个名为xoo的props
props:['xxoo'],
template:'<li>{{xxoo.text}}</li>'
})
var app = new Vue({
el:'#app',
data:{
list: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
},
})
</script>
7.修改vue的属性
当修改了data下的id为5时,vue实例的data下的id也会跟随改变
<script>
var data = {id:1};
var app = new Vue({
data:data
})
data.id = 5;
console.log(app.id);//5
console.log(data.id);//5
</script>
8.获取实例的data属性
app. el就是该实例绑定的挂载点
var data = {id:1};
var app = new Vue({
el:'#app',
data:data
})
console.log(app.$el === document.getElementById('app'));//true
console.log(app.$data === data);//true
app.$watch('id',function(newValue,oldValue){
//app.id改变后调用
})
9、创建实例时触发
当打开页面创建这个实例的时候,触发created事件
<script>
var data = {id:1};
var app = new Vue({
el:'#app',
data:data,
created:function(){
console.log(this.id);//1
}
})
</script>
10.模板语法
{{内容}}是不会解析html代码的
只有使用v-html指令才能解析
<div id="app">
<p> {{ html }}</p> //<a style="color:red">xxoo</a>
<p><span v-html="html"></span></p> //xxoo
</div>
<script>
var data = {id:1};
var app = new Vue({
el:'#app',
data:{
"html":'<a style="color:red">xxoo</a>'
}
})
</script>
11.使用javascript表达式
<div id="app">
<p> {{ html + 1 }}</p> //2
<p> {{ html == 1 ? 'yes' : 'no' }}</p> //yes
<p> {{ message.split('').reverse().join('') }}</p> //ooxx
<!-- 不能使用流程控制和语句
{{ var a = 1}}
{{if (ok) { return message}}
-->
</div>
<script>
var data = {id:1};
var app = new Vue({
el:'#app',
data:{
"html":1,
"message":'xxoo'
}
})
</script>
12.指令的参数
指令就是带有v-前缀的特殊属性,以下的意思将p标签的href属性和url的值绑定在一起
<div id="app">
<p v-bind:href="url">xxoo</p> // <p href="xxoo"></p>
</div>
<script>
var data = {id:1};
var app = new Vue({
el:'#app',
data:{
"url":'xxoo'
}
})
</script>
13.计算属性
声明了一个计算属性为computed,写的jia函数将作用于此
其实用methods里面写函数也可以实现相同的效果,不过computed是做了缓存的效果,如果是操作巨大的数据,性能会比较好
<div id="app">
{{ first }} // 1
{{jia}} //3
{{jia2()}} //3
</div>
<script>
var app = new Vue({
el:'#app',
data:{
"first":1,
"second":2
},
computed:{
//计算属性
jia:function(){
return this.first + this.second;
}
},
methods:{
//计算属性
jia2:function(){
return this.first + this.second;
}
}
})
</script>
14.侦听器
<div id="app">
<p>
<input v-model="question">
</p>
</div>
var app = new Vue({
el: '#app',
data: {
question: ''
},
watch: {
// 如果 `question` 发生改变,这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
}
}
})
</script>
15.动态切换class属性
<div id="app">
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
// class="static active"
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true,
hasError: false
}
})
</script>
16.绑定内联样式
<div id="app">
<div v-bind:style="style"></div>
//<div style="color: red; font-size: 14px;"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
style:{
color:'red',
fontSize:'14px'
}
},
})
</script>
17.v-if指令 条件渲染
这条意思是实例里存在ok这个属性就 渲染,不存在则不渲染
<div id="app">
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
//else紧接上一个v-if,如果ok不存在,则渲染v-else
</div>
<script>
var app = new Vue({
el: '#app',
data: {
ok:"123"
},
})