Vue的创建和使用

一、Vue创建

1.1 引用Vue

<!--引入vue.js文件-->

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

或者下载到本地

<script src="js/vue.min.js"></script>

1.2 创建

        红色为固定格式，body为第一级不可更改。>div可以为>a/>ul，绿色为可以更改项。

 let v = new Vue({      

          el: "body>div",      

          data: {        

            info: "Hello Vue"  

  }     });    
 

<script>

  //创建Vue对象  
  let v = new Vue({      

  el: "body>div",      

  data: {        

    info: "Hello Vue"  

      }     });    

setTimeout(function () {    

    v.info = "3秒钟到了";    

}, 3000); </script>

二、Vue的使用

<!--不依赖标签-->

{{msg}}

<p>{{msg}}</p>

<!--元素的文本内容和变量进行绑定-->

<p v-text="msg"></p>

<!--元素的html标签内容和变量绑定，可以识别到标签-->

<p v-html="msg"></p>

三、属性的绑定

    <!--属性绑定  ：  值 -->
    <a ：href="url">超链接1</a>
    <a v-bind:href="url">超链接2</a>
    <img :src="imgName" alt="">
    <input type="text" :value="info">