vue基础语法

最新推荐文章于 2022-03-13 11:18:13 发布

薄荷味de糖

最新推荐文章于 2022-03-13 11:18:13 发布

阅读量104

点赞数

本文链接：https://blog.csdn.net/Tang_xiaochao/article/details/113140727

版权

VUE基本介绍
vue是一个构建用户界面的渐进式开发框架
在未用脚手架之前可以运用CDN的方式引入vue从而书写vue代码
快速入门

<body>
    <div id="app">{{mess}}</div>//s视图显示的地方
      //引入vue
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      const  vm=  new Vue({//创建VUE实例
            el : '#app',//挂载dom元素
            data : {//维护的数据以{{}}的方式添加到标签上
                mess : 'this is a test'
            }
        })
    </script>
</body>
当创建了vue实例之后vue对象会代理data数据访问数据可以直接通过vm.mess来访问到数据，在vue中为了区分用户自定义的属性以及方法vue内置属性以及方法前面都添加了$符号

例如:
console.log(vm.$el);//访问的就是vue挂载的dom元素

在一个贴近的例子
$wach用于监听数据的变化

<body>
    <div id="app">{{mess}}</div>//s视图显示的地方
      //引入vue
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      const  vm=  new Vue({//创建VUE实例
            el : '#app',//挂载dom元素
            data : {//维护的数据以{{}}的方式添加到标签上
                mess : 'this is a test'
            }
        })
    </script>
</body>
  vm.$watch('mess',function(newValue,oldValue){
      console.log(`mess 新的值为${newValue}`);
      console.log(`mess 旧的值为${oldValue}`);
});

生命周期
在vue中有8个生命周期钩子函数（钩子函数相当于点击事件触发之后才会执行）

befreCreate //vue实例创建之前
Created //vue实例创建完毕数据也创建完毕但是数据还没进入模板
beforeMount //数据渲染到模板的事件点
Mounted //已经将数据渲染到模板DOm已经更新
beforeUpdate:更新前
updated //更新后
beforeDestroy:实例销毁前
destroyed:实例销毁后
vue 中 created 和 mounted 的区别。

created：在模板渲染成 html 前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted：在模板渲染成 html 后调用，通常是初始化页面完成后，再对 html 的 dom 节点进行一些需要的操作。
vue基础语法
v-once
是数据第一次渲染的时候有效，之后数据的改变不会影响视图。

<body>
    <div id="app">
        <p v-once>{{mess}}</p>
        <p>{{mess}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el : '#app',
            data : {
                mess : 'this is a test'
            }
        })
    </script>
</body>

v-cloak，可以让数据在渲染之前不让视图显示出来。但是要结合 style 一起使用

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       [v-cloak]{
           display: none;
       }
   </style>
</head>

<body>
   <div id="app" v-cloak>
       <p>{{mess}}</p>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <script>
       const vm = new Vue({
           el : '#app',
           data : {
               mess : 'this is a test'
           }
       })
   </script>
</body>

渲染 html 标签
有时候需要渲染html标签就需要用到v-html代码如下

<body>
       <p v-html="mess"></p>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <script>
       const vm = new Vue({
           el : '#app',
           data : {
               mess : '<span style="color:red">this is a test</span>'
           }
       })
   </script>
</body>

动态绑定属性

我们可以通过 v-bind 来动态的绑定元素的属性，之后就可以统一通过控制 data 来控制元素的属性。

<body>
    <div id="app" v-cloak>
        <p v-bind:title="abc">{{mess}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el : '#app',
            data : {
                mess : 'this is a test',
                abc : 'def'
            }
        })
    </script>
</body>