vue实例

1、{{msg}}

将表达式执行的结果 输出当前调用元素的innerhtml中；还可以将数据绑定到视图

<template>
  <div class="hello">
   <span>
    {{message}}
  </span>
  </div>
</template>
 
<script>
export default{
  data(){
    return {
      message: '页面加载于 ' + new Date().toLocaleString()
    }
  }
}
</script>

2、v-bind绑定属性，支持简写：

<template>
  <div class="hello">
   <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
  </div>
</template>
 
<script>
export default{
  data(){
    return {
      message: '页面加载于 ' + new Date().toLocaleString()
    }
  }
}
</script>

3、v-if （项目不显示是整个项目都没有）和v-show（项目有，但是加了display：none）类似
v-bind绑定属性

<template>
  <div class="hello">
    <p v-if="see">你可以看到我了</p>
  </div>
</template>
 
<script>
export default{
  data(){
    return {
     see:true
    }
  }
}
</script>

4、v-for 循环

<template>
  <div class="hello">
    <p v-for="(item,index) in items" :key="index">{{item.text}}-{{index}}</p>
  </div>
</template>
 
<script>
export default{
  data(){
    return {
    items:[
      {text:'hi'},
      {text:'hello'},
      {text:'hehe'}
    ]
    }
  }
}
</script>

5、v-on事件绑定，缩写@

<template>
  <div class="hello">
    <p>{{message}}</p>
    <button v-on:click="reverseMessage">逆转消息</button>
  </div>
</template>
 
<script>
export default{
  data(){
    return {
      message:'你好'
    }
  },
  methods:{
    reverseMessage:function(){
      this.message=this.message.split('').reverse().join('')
    }
  }
}
</script>

6、v-model双向绑定 一般用于表单之间

<template>
  <div class="hello">
    <p>{{message}}</p>
    <input  v-model="message">
  </div>
</template>
 
<script>
export default{
  data(){
    return {
      message:'你好'
    }
  }
}
</script>

7、v-once只执行一次

8、v-html会输出文本

9、计算属性computed,只需计算一次，而调用方法会计算多次

<template>
  <div class="hello">
    <p>{{message}}</p>
    <p>{{reverseMessage}}</p>
  </div>
</template>
 
<script>
export default{
  data(){
    return {
      message:'hi'
    }
  },
  computed:{
    reverseMessage:function(){
    return this.message.split('').reverse().join('')
  }
  }
}
</script>

10、v-show

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

<template>
  <div class="hello">
   <div v-show="see">
    A
   </div>
  </div>
</template>
 
<script>
export default{
  data(){
    return {
     see:true
    }
  }
}
</script>