vue 框架的入门教程

最新推荐文章于 2024-07-30 21:54:07 发布

柚子·小哥哥

最新推荐文章于 2024-07-30 21:54:07 发布

阅读量567

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_46174785/article/details/105604379

版权

vue 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

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:"<a href='https://www.cnblogs.com/yjzs/'>柚子小哥哥的博客园</a> "
           }
       })
   </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()
  }
})