记录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.$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>