vue 框架的入门教程

vue框架的入门教程

el 挂载点：

• el 是用来设置vue实例挂载，（管理）的元素
• vue会管理el选项命中的元素以及内部的后代元素
• 可以使用其他的选择器，但是不建议使用ID选择器
• 可以使用其他的双标签，不能挂载到HTML和body上

data ：数据对象

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

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

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

   <div id="app">
            {{message}}
            <h2>{{school.name}}{{school.age}}</h2>
             <ul>
                 <li>{{ campus[0] }}</li>
                 <li>{{ campus[1] }}</li>
                 <li>{{ campus[2] }}</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:"20"
                  },
                  campus:['苏州','上海','北京']
              },
          }) 
      </script>
  

v－text

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

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

    <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 指令无论内容是什么，只会解析为文本

   <div id="app">
       // 在这是区分一下，v-html和v-text之间的区别
         <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:"柚子小哥哥的博客园 "
             }
         })
     </script> 
  

v-on

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

• 事件名称不需要写on

• 指令可以简写为@

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

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

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

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

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

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

  <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> 
  

• 创建vue实例中，el(挂载点),data （数据），methods （方法）
• v-on 指令的作用是绑定事件，简写为@
• 方法中通过this，关键字获取data中的数据
• v-text 指令的作用是：设置元素的文本值，简写为｛｛｝｝
• v-html指令的作用是：设置元素的innerHtml

v-show

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

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

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

   <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:20
          },
          methods: {
            Show: function () {
              this.isShow = !this.isShow;  
            },
          },
        });
      </script> 
  

v-if

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

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

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

v-bind

• v-bind 指令的作用就是：为元素绑定属性
• 完整的写法是 v-bind 属性名
• 简写的话直接省掉v-bind ，只保留： 属性名
• 需要动态的增删class建议使用对象的方式

 <!-- <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 可以结合使用其他指令一起使用

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

   <div id="app">
            <input type="button" value="增加数据" @click='add'>
            <input type="button" value="移除数据" @click='rem'>
           <ul>
               <li v-for='(item,index) in arr'>
                    {{index+1}}    {{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:"20"},
                       {p:'30'},
                       {p:"40"}
                   ]
               },
               methods:{
                   add:function(){
                       this.age.push({p:'岁'})
                   },
                   rem:function(){
                       this.age.shift()
                   }
               }
           })
       </script>
  

v-model (双向绑定)

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

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

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

   <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>
  

v-model （中的底层原理是）

解答：
原生input其实只是一个语法中，:bind="value"与@change="value = $event.target.value"的结合。
自定义组件的时候的v-model默认监听change事件和绑定value 的prop。

v-clock

• 能够解决插值表达式闪烁问题.
• 用法需要在style属性里面加上display.nnone

directive （自定义指令）

// 注册一个全局自定义指令 `v-focus`;
就需要把vue去掉，就换成局部的指令。
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

• 这是一个全局的一个自定义指令，如果要自定义局部的自定义指令。
  注释： 这里是vue的框架的入门教程，所以没有用到vue官方提供的生成器，这里说道，vue指令的作用。