vue 框架，入门必看

vue 的 入门

el 的挂载点：

• el 是用来设置vue实例挂载，（管理）的元素

• vue会管理el选项命中的元素以及内部的后代元素

• 可以使用其他的选择器，但是不建议使用ID选择器

• 可以使用其他的双标签，不能使用HTML和body

data： 数据对象

• vue 中 用到的数据定义在data中

• data中可以写复杂类型的数据

• 渲染复杂数据时，遵守js的语法即可

• code

   <div id="app">
           {{message}}
           <h2>{{school.name}}{{school.age}}</h2>
            <ul>
                <li>{{ campus[] }}</li>
                <li>{{ campus[] }}</li>
                <li>{{ campus[] }}</li>
            </ul>
         </div>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app = new Vue({
             el:'#app',
             data:{
                 message:"hello vue",
                 school:{
                     name:"柚子小哥哥",
                     age:""
                 },
                 campus:['苏州','上海','北京']
             },
         })
      </script> 

v-text

• v-text 指令的作用就是：设置标签的内容（textContent）

• 默认写法会替换全部内容，使用差值表达是｛｛｝｝可以替换指定内容

• code

     <div id="app">
         <h2 v-text="message+'嘻嘻'"></h2>
         <h2 v-text='info'></h2>
     </div>
 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                 message:"柚子小哥哥!!!",
                 info:"Hello vue"
             }
         })
     </script>  

v-html

• v-html 指令的作用是：设置元素的innerHTML

• 内容中有html结构会被解析为标签

• v-text 指令无论内容是什么，只会解析为文本

• code

    <div id="app">
        <p v-html='content'></p>
        <p v-text='content'></p>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                content:"<a href='https://www.cnblogs.com/yjzs/'>柚子小哥哥的博客园</a> "
            }
        })
    </script>  

v-on

• v-on 指令的作用是：为元素绑定事件

• 事件名称不需要写on

• 指令可以简写为@

• 绑定的方法定义在 methods 属性中

• 方法的内部通过this关键子可以访问定义在data中数据

• 事件绑定的方法写成函数调用的形式，可以传递自定义参数

• 定义方法是需要形参来接受传入的实差参

• 事件的后面根上修饰符可以对事件进行限制

• .enter 可以限制触发的按键的为回车

• code

    <div id="app">
       <input type="button" value="v-on指令" v-on:click="doIt" />
       <input type="button" value="v-on简写" @click="doIt" />
       <input type="button" value="双击事件" @dblclick="db" />
       <input type="text" @keyup.enter="say" />
       <p @click="changeFood">{{food}}</p>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
       var app = new Vue({
         el: "#app",
         data: {
           food: "柚子小哥哥！",
         },
         methods: {
           doIt: function () {
             alert("绑定点击事件");
           },
           db: function () {
             alert("绑定双击事件！");
           },
           changeFood: function () {
             // console.log(this.food);
             this.food += "好帅啊。";
           },
           say: function () {
             alert("绑定回车事件！");
           },
         },
       });
     </script> 

v-show

• v-show 指令的作用是：根据真假切换元素的显示状态

• 原理是修改元素的display实现显示隐藏

• 指令后面的内容，最终都会解析会布尔值为true元素，值为false元素为隐藏

• code

   <div id="app">
       <input type="button" value="切换显示状态" @click="ChangeShow" />
       <input type="button" value="累加" @click="add" />
       <img v-show="isShow" src="./img//7735908_161703348144_2.jpg" alt="" />
       <img v-show="age>=18" src="./img//7735908_161703348144_2.jpg" alt="" />
     </div>
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
       var app = new Vue({
         el: "#app",
         data: {
           isShow: false,
           age: ,
         },
         methods: {
           ChangeShow: function () {
             this.isShow = !this.isShow;
           },
           add: function () {
             this.age++;
           },
         },
       });
     </script> 

v-if

• v-if 指令的作用就是：根据表达式的真假切换元素的显示状态

• 本质是通过 DOM 元素老切换显示状态

• 表达式的值为true，元素存在与DOM树中，为false,从DOM中移除

• code

  <div id="app">
       <input type="button" @click="Show" value="切换显示" />
       // v-if 操作的是DOM树
       <p v-if="isShow">柚子小哥哥</p>
       // v-show操作的是样式
       <p v-show="isShow">v-show</p>
       <p v-show="like>10">不喜欢</p>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
       var app = new Vue({
         el: "#app",
         data: {
           isShow: false,
           like:
         },
         methods: {
           Show: function () {
             this.isShow = !this.isShow;
           },
         },
       });
     </script> 

v-bind

• v-bind 指令的作用就是：为元素绑定属性

• 完整的写法是 v-bind 属性名

• 简写的话直接省掉v-bind ，只保留： 属性名

• 需要动态的增删class建议使用对象的方式

• code

   <div id="app">
       <img v-bind:src="imgSrc" alt="" />
       <br />
       <img
         :src="imgSrc"
         alt=""
         :title="imgTitle"
         :class="{Ac:Active}"
         @click="Active"
       />
     </div>
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
       var app = new Vue({
         el: "#app",
         data: {
           imgSrc: "./img//7735908_161703348144_2.jpg",
           imgTitle: "柚子小哥哥",
           isActive: false,
         },
         methods: {
           Active: function () {
             this.isActive = !this.isActive;
           },
         },
       });
     </script> 

v-for

• v-for 指令的作用就是：根据数据生成的列表结构

• 数组经常v-for结合使用

• 语法是（item,index）in 数据

• item 和 index 可以结合使用其他指令一起使用

• 数组长度的更新会同步到页面上，是响应式的

• code

  <div id="app">
           <input type="button" value="增加数据" @click='add'>
           <input type="button" value="移除数据" @click='rem'>
          <ul>
              <li v-for='(item,index) in arr'>
                   {{index+}}    {{item}}
              </li>
          </ul>
          <h1 v-for=' item in age' v-bind:title='item.p'>
              {{item.p}}
          </h1>
       </div>
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script>
          var app = new Vue({
              el:"#app",
              data:{
                  arr:['广东','上海','苏州'],
                  age:[
                      {p:""},
                      {p:''},
                      {p:""}
                  ]
              },
              methods:{
                  add:function(){
                      this.age.push({p:'岁'})
                  },
                  rem:function(){
                      this.age.shift()
                  }
              }
          })
      </script> 

v-model  （双向绑定）

• v-model 指令的作用是便捷和获取表单元素的值

• 绑定的数据和表单值相关联

• 绑定的数据《》 表单元素的值

• code

  <div id="app">
          <input type="button" value="修改mesage" @click='Modifies' >
          <input type="text" v-model='message' >
          <h3>{{message}} </h3>

      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script>
          var app = new Vue({
              el:"#app",
              data:{
                 message:"柚子小哥哥"
              },
              methods:{
                 Modifies:function(){
                     this.message='修改内容！'
                 }
              }
          })
      </script>

总结：

• 创建vue实例中，el(挂载点),data （数据），methods （方法）

• v-on 指令的作用是绑定事件，简写为@

• 方法中通过this，关键字获取data中的数据

• v-text 指令的作用是：设置元素的文本值，简写为｛｛｝｝

• v-html指令的作用是：设置元素的innerHtml

数量增加的案例

    <div id="app">
     <button @click="sub">-</button>
       <span> {{num}} </span>
       <button @click="add">+</button>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
       var app = new Vue({
         el: "#app",
         data: {
           num: ,
         },
         methods: {
           add: function () {
             // console.log('add')
             if (this.num < ) {
               this.num++;
             } else {
               alert("最多点5下");
             }
           },
           sub: function () {
             // console.log('sub')
             if (this.num > ) {
               this.num--;
             } else {
               alert("负数点不了");
             }
           },
         },
       });
     </script>