Vue框架特性

Vue框架特性

1. Vue的引入
   最简单的引入方法：
   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
   该方法需要保持网络连接，无法在无网络环境下使用

2. Vue的使用
   需要声明一个Vue的实例

   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
   <script>
       var app = new Vue({
       })
   </script>
   

   ⚠️注意： 接下来除了html标签之外的代码都在第二对<script>标签里的new Vue({})中编写

3. Vue的特性
   一、 响应式数据，插值表达式

       <div class="v">
           <p> {{ title }} </p> // 插值表达式,直接通过变量名来访问变量内容
           <p> {{ output() }} </p> // 插值表达式,可以调用函数
       </div> // class为v的div标签
       <script>
     	var app = new Vue({
     	 el: ".v", //el属性作用：设置Vue的生效位置, .v为选择class为v的标签
     	 data() {
     	    return {
     	        // 固定写法，响应式数据放在这里
     	        title: '标题'
     	    }
     	 },
     	 methods: {  //与data同级，这里用来写函数
     	     outputs() {
     	         return this.title + "是无题"
     	     }
     	 }
     	})
       </script>
       
   

   
   以上代码的效果如图所示

   二、指令

      <p> {{ title }} </p>
      <p v-text="title></p>   //这是指令的写法，效果与插值表达式一样    
   

      <p v-for="item in 5"> {{ item }} </p> // 在页面上显示1~5的数字
   

      <p v-if="false"></p> // 不产生这个标签
   

      <p :title="title"> // p标签的title属性绑定成响应式数据title的值,冒号是v-bind:的简写形式
   

      <button @click="output()> </button> //把上面的output函数绑定到点击按钮的事件上，@是v-on:的简写
   

      <input type="text" v-model="title"> // v-model是双向绑定，只能在表单中使用，就是可以通过表单输入来更新被绑定的数据的值