声明式衬着

vue的引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

开端运用vue

 <div id="app">
    {{message}}
  </div>
  
  <script>
    var app=new Vue({
    el: '#app',
    data:{
      message:"hello vue"
    }
    })
  </script>

毛病笔记：1.new Vue中的V遗忘大写，2.el的#app忘了加引号以及忘了在末端加逗号

v-bind指令

 <div id="app">
    <span v-bind:title="message">
      鼠标悬停几秒钟检察此处动态绑定的提醒信息！
    </span>
  </div>
  
  <script>
    var app2=new Vue({
    el: '#app',
    data:{
      message: 'v-bind特征被称为指令。指令带有前缀 v-，以示意它们是 Vue 供应的特别特征。'
    }
    })
  </script>

v-bind 特征被称为指令。指令带有前缀 v-，以示意它们是 Vue 供应的特别特征。在这里，该指令的意义是：“将这个元素节点的 title 特征和 Vue 实例的 message 属性保持一致”。

前提与轮回

v-if

 <div id="app">
   <p v-if="seen">seen为false时就会消逝</p>
  </div>
  
  <script>
    var app2=new Vue({
    el: '#app',
    data:{
      seen: true
    }
    })
  </script>

v-for

 <div id="app">
   <p v-for="todo in todos">{{todo.text}}</p>
  </div>
  
  <script>
    var app2=new Vue({
     el: '#app',
     data:{
      todos:[
        {text:'进修JavaScript'},
        {text:'进修Vue'},
        {text:'全部牛项目'}
      ]
     }
    })
  </script>

“{{}}”中就是想要显现Vue实例中属性供应的内容

处置惩罚用户输入

为了让用户和你的运用举行交互，我们可以用 v-on 指令增加一个事宜监听器，经由过程它调用在 Vue 实例中定义的要领：
v-on

 <div id="app">
   <p>{{message}}</p>
    <button v-on:click="reverseMessage">反转字符串</button>
  </div>
  
  <script>
    var app2=new Vue({
     el: '#app',
     data:{
      message:'hello v-on'
     },
     methods:{
      reverseMessage:function(){
        this.message=this.message.split('').reverse().join('')
       }
     }
    })
  </script>

Vue 还供应了 v-model 指令，它能轻松完成表单输入和运用状况之间的双向绑定。
v-model

<div id="app">
   <p>{{message}}</p>
   <input v-model="message">
  </div>
  
  <script>
    var app2=new Vue({
     el: '#app',
     data:{
      message:'hello v-model'
     }
    })
  </script>

当修正input中的内容时，标签p中的message在页面上显现的笔墨也随着转变。