vue学习笔记（一）

Vue基础语法

1. 实例

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}

2. Vue实例中的数据,事件和方法

 message: '<strong>Hello</strong> Word!’
v-textd效果：  <strong>Hello</strong> Word!
v-html效果： Hello Word!
v-text和{{}}表达式渲染数据，不解析标签。
v-html不仅可以渲染数据，而且可以解析标签。

事件：

 <h1 v-on:click="click">{{msg}}</h1>
<script>
export default {
  name: 'App',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
    }
  },
  methods:{
         click(){
           alert('你好')
         }
      },
}
</script>

v-on:click 跟@click一样

3. Vue中双向数据绑定

<template>
  <div id="app" >
    <input  v-model="msg" type="text">
    <h1 v-on:click="click">{{msg}}</h1>
  </div>
</template>

4. Vue中的计算属性和侦听器

computed将两个属性加起来

watch：用于监听

computed:{

     fullname:function(){

       return this.firstname + '' + this.lastname

     }

  },

  watch:{

    fullname:function(){

      this.count++

    }

  }

5.  v-if, v-show与v-for指令

v-if   fals时直接删除DOM节点，true增加DOM节点
v-show 不删除DOM节点情况下添加style="display: none;"
频繁对DOM节点进行操作的时候，用v-show会更好
一次显示和隐藏的话 用 v-if
循环显示
<li v-for="(item,index) of list" :key="index">{{item}}</li>