记录vue的学习

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.data就是该实例的属性app.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"
},
})

18 通过事件向父级组件发送消息

一个组件：blog-post
传递方法：$emit('方法名'，[参数])
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ post.title }}</h3>
<button v-on:click="$emit('enlarge-text',0.1)">
Enlarge text
</button>
<div v-html="post.content"></div>
</div>
`
})
v-on:enlarge-text="onEnlargeText" 这里也可以传递的一个方法
var app = new Vue({
el:'#components-demo',
data: {
posts: [
{ id: 1, title: 'My journey with Vue' ,content:'111'},
{ id: 2, title: 'Blogging with Vue' ,content:'1112'},
{ id: 3, title: 'Why Vue is so fun' ,content:'1113'}
],
postFontSize: 1
},
methods:{
onEnlargeText:function(arg){
this.postFontSize+=arg;
console.log(arg);
}
}
})

19 简单的选项卡

<style type="text/css">
.tab-button {
padding: 6px 10px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border: 1px solid #ccc;
cursor: pointer;
background: #f0f0f0;
margin-bottom: -1px;
margin-right: -1px;
}
.tab-button:hover {
background: #e0e0e0;
}
.tab-button.active {
background: #e0e0e0;
}
.tab {
border: 1px solid #ccc;
padding: 10px;
}
</style>
<div id="components-demo">
<button
v-for="tab in tabs"
v-bind:key="tab"
v-bind:class="['tab-button', { active: currentTab === tab }]"
v-on:click="currentTab = tab"
>{{ tab }}</button>
<component v-bind:is="currentTabComponent" class="tab"></component>
</div>

<script type="text/javascript">
Vue.component('tab-home', {
template: '<div>Home component</div>'
})
Vue.component('tab-posts', {
template: '<div>Posts component</div>'
})
Vue.component('tab-archive', {
template: '<div>Archive component</div>'
})
var app = new Vue({
el:'#components-demo',
data: {
currentTab: 'Home',
tabs: ['Home', 'Posts', 'Archive']
},
computed: {
currentTabComponent: function () {
console.log(this);
console.log('tab-' + this.currentTab);
return 'tab-' + this.currentTab.toLowerCase()
}
}
})
</script>

阅读更多