Vue学习笔记(一) 基本使用

文章分类： 前端

5年前

1647

0

虽然已经2019了，都说dom操作已经过时了，但是我还是依然钟爱着jquery、layer.ui，可能太过习惯的缘故吧。近年来，各种前端框架层出不穷，随之掀起了学习vue、angular的热潮，小编也忍不住了，要说jquery和vue的谁更好，我只能说各有利弊吧

资源

vue文档：https://cn.vuejs.org/v2/guide/
安装vue：http://www.itselfstudy.cn/article/1264/detail
element文档: https://element.eleme.cn/2.0/#/zh-CN/component/installation
vue-element-admin文档: https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/

vue起步

vue示例:

<body>
    <div id="app">
        {{user_name}}
    </div>
</body>

// 两种引入方式，任意选择
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<script>
    var app = new Vue({
        el:'#app',  // 设置要操作的元素
        // 要替换的额数据
        data:{
            user_name:'我是一个div' 
        }
    })
</script>

数据驱动：当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

vue模板语法

  • Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
    Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
    结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
  • 在html里面插值：
    • 文本：{{data属性名称}}
    • html：v-html = “属性名称” v-text 会转换为字符串
    • html标签属性值：v-bind:标签属性 = “data属性名称”
    • 表达式：{{表达式值}}，如{{ 5 + 5 }}
  • 模板指令：带有 v- 前缀的特殊属性，用于在表达式的值改变时，将某些行为应用到 DOM 上。常用的有以下几个：
    • v-show：根据条件来决定是否展示元素
    • v-if 三兄弟 只会渲染判断为真的dom
    • v-show 和 v-if 的区别：
      • v-show 无论判断是否为真，都会渲染所在的标签，而v-if只会在判断条件为真的时候才会渲染标签；
      • 类似于 display: none 和 visibility: hidden 的区别
      • v-if 有更高的切换消耗，v-show 有更高的初始渲染消耗
      • 在判断条件发生变化时，比如由真变假，v-show 会修改 display: none 来达到效果，而 v-if 会直接注释掉节点
    • v-bind：绑定属性值，可以简写为“:”
    • v-on：绑定事件，可以简写为“@”，用法：v-on:click = “事件处理”
    • v-model：双向数据绑定，用于input、select、textarea、checkbox、radio 等表单控件元素，用法：v-model = “属性名称”
    • v-once 只会渲染一次 即使数据改变
    • v-for: 循环
      v-bind 用来响应地更新html属性 使用场景：绑定接口请求得到的数据 简写： : ，可以绑定class和内联样式 例如：
<div id="app">
    <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
    <br><br>
    <!-- 单引号只是对下面对两个class1作出区分 不使用也可以 前面是class 样式 后面是bool值 -->
    <div v-bind:class="{'class1': class1}">
      directiva v-bind:class
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        class1: false
      }
    });
  </script>
</body>

过滤器

  • 过滤器：允许自定义过滤器，被用作一些常见的文本格式化。
    • 用法：{{ 被过滤文本 : 过滤规则}}
    • 可以多层过滤器嵌套：{{ message : filterA : filterB}}
    • 过滤器函数可以接受参数：{{ message : filter(arg1, arg2) }}，message是第一个参数

vue中可以自定义过滤器 被用作常见地文本格式化

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<div id="app">
    <!-- 过滤器的用法 -->
    {{ msg | myFilters }}
  </div>

  <script>
    var app = new Vue({
        el: '#app',
        data:{msg:'UP'},
        //定义过滤器
        filters:{
            // 过滤器的名称及方法
            myFilters:function(val){
                return val.toLowerCase();
            }
        }
    })
  </script>

监听属性

<div id="div">
    <input type="text" v-model="xing">
    <input type="text" v-model="ming">
    {{ fullname }}
</div>
<script>
    var app = new Vue({
        el: '#div',
        data: {
            xing: '',
            ming: '',
            fullname:''
        },
        // 设置侦听器
        watch: {
            // 侦听器中的方法名和要真挺的数据属性名必须一致
            // xing 发生变化，侦听器就会被执行，且将变化后的值和变化前的值传入
            xing:function(newVal,old_val){
                this.fullname = newVal+this.ming;
            },
            ming:function(newVal,oldVal){
                this.fullname = this.xing+newVal;
            }
        }
    })
</script>

通过上面的案例，我们基本掌握了侦听器的使用，但是我们也发现，与计算属性相比，侦听器并没有优势；也不见得好用，直观上反而比计算属性的使用更繁琐；

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

使用ref操作DOM

在学习 jq 时，我们首要任务就是学习选择的使用，因为选择可以极其方便帮助我们获取节点查找dom，因为我们要通过dom展示处理数据。而在Vue中，我们的编程理念发生了变化，变为了数据驱动dom；但有时我们因为某些情况不得不脱离数据操作dom,因此vue为我们提供了 ref 属性获取dom节点；

<div id="app">
    <input type="button" @click='click' value="按钮"> <br>
    <p ref="pv">123</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        methods: {
            click: function () {
                // 使用原生JS获取dom数据
                // var p = document.getElementsByTagName('p')[0].innerHTML;
                // console.log(p);

                // 使用vue ref 属性获取dom数据
                var d = this.$refs.pv.innerHTML;
                console.log(d);
            }
        }
    })
    console.log(app.$refs);
</script>

但是在项目开发中，尽可能不要这样做，因为从一定程度上，ref 违背的mvvm设计原则；

组件

组键语法

组件是可复用的 Vue 实例，且带有一个名字。把这个组件作为自定义元素来使用。组件的好处是写一次可以进行任意次数的复用。

<div id="app">
    <!-- 使用组件 -->
    <!-- 将组件名直接当做标签名在html代码中使用即可 -->
    <mytemp></mytemp>
    <!-- 组件可以进行任意次数的复用 -->
    <mytemp></mytemp>
</div>
<script>
    // 定义一个名为 mytemp 的新组件
    Vue.component('mytemp',{
        // template属性的值，作为组件的内容
        // vue 会把这个值替换到html中并会被浏览器渲染
        template:"<h2>我是一个组件</h2>"
    })
    var app = new Vue({
        el: '#app',
    })
</script>

上面代码中我们直接使用 Vue.component() 方法定义了组件，而这个 mytemp 组件可以用在所有 vue 实例中，
这种组件被称为 全局组件
在具体的某个vue实例中，也可以定义组件，但是组件仅会在具体的 vue 实例中起作用，这种组件被称为 局部(私有)组件

<div id="app">
    <!-- 使用组件 -->
    <!-- 将组件名直接当做标签名在html代码中使用即可 -->
    <mytemp></mytemp>
</div>
<div id="app2">
    <!-- 不可用 -->
    <mytemp></mytemp>
</div>
<script>
    var app = new Vue({
        el: '#app',
        // app 的私有组件，其他实例对象不可用
        components: {
            mytemp: {
                template: "<h2>我是一个组件</h2>",
            }
        }
    })
    var app2 = new Vue({
        el: '#app2',
    })
</script>

注意
组件名如果是驼峰法命名，使用组件时要将大写字母改为小写，并且在前面加上 -
组件中的tamplate属性必须有一个唯一的根元素，否则会报错

组件中的数据及方法

组件是带有名字的可复用的 Vue 实例 ，所以它们与 new Vue 实例对象接收相同的参数选项 data、computed、watch、methods , 但 el例外；

虽然组件和实例对象可以接收相同的参数选项，但在具体使用中，vue实例对象的 data 与组件中的 data 还是有差异的, 在我们自己写的组件中，data 必须是一个函数
一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回的对象；

<div id="app">
    <my-temp></my-temp>
</div>
<script>
    var app = new Vue({
        el: '#app',
        components: {
            myTemp: {
                // 一个组件的 data 选项必须是一个函数
                data:function(){
                    // 将 数据 装入 对象 返回
                    return {msg:'我是data选项'}
                },
                // 其他选项的使用不受影响
                methods:{
                    cli(){
                        alert(123);
                    }
                },
                template: "<div @click='cli'>{{msg}}</div>",
            }
        }
    })
</script>

通过 Prop 向子组件传递数据

上面的代码中，组件 mytemp 并不能获取实例中 data 的数据，这是因为组件与组件之间都拥有各自独立的作用域；
vue 在组件中提供了props 选项，props 接受一个在组件中自定义属性的值；

<div id="app">
    <mytemp cc="我是cc"></mytemp>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data:{msg:'数据'},
        components:{
            mytemp:{
                template:'<h2>data:{{cc}}</h2>',
                props:['cc'],
            }
        }
    })
</script>

我们知道了props的用法后，怎么才能将vue实例对象中的数据传入组件中呢？我们可以借助 v-bind 指令来进行传值；

<div id="app">
    <mytemp v-bind:cc="msg" v-bind:kk="msg2"></mytemp>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            msg:'数据',
            msg2:'数据二'
        },
        components:{
            mytemp:{
                template:'<h2>data:{{cc}}<br>{{kk}}</h2>',
                props:['cc','kk'],
            }
        }
    })
</script>

vue实例对象也是一个组件，而 mytemp 组件就是运行在 实例对象下面的，这时我们也会将 实例对象称为 父组件，将 mytemp 组件称为 子组件； 而我们上面的代码，实际上已经实现了 父组件向子组件传递数据的 功能；

生命周期

  • beforeCreate：实例创建之前执行的函数
  • created：实例已经创建，但页面还没有展示
  • beforeMount：实例在挂载前，页面还没有展示，但虚拟dom已经配置
  • mounted：实例挂载后，页面在这个函数之后展示
  • beforeUpdate：页面更新触发的方法，实例更新前，虚拟dom已经配置，但页面还没有更新
  • updated：实例更新后，页面在这个函数之后更新
  • beforeDestroy：实例销毁前
  • destroyed：实例销毁后

参考文献：
https://www.jianshu.com/p/3f04c5cbbe2c
https://blog.csdn.net/weixin_44288250/article/details/90019632

标签： vue 前端
点赞 分享 收藏
1000
评价

GS

北京 | php攻城狮

创作 35 粉丝 2

fighting
私信

京ICP备16004081号-4 Copyright © 2021

Powered by 菜鸟学院 GS

站长统计

登入

忘记密码？

还没有注册？注册

注册

已经注册过了？登入