Vue 基础、常用指令、过滤器、数据监听、事件监听

深藏阁楼爱情的钟 2023-02-17 03:54 1阅读 0赞

### 目录 ###

*   *   *  vue基础
         *  常用指令
         *   *  v-text、v-html 元素内容绑定
             *  v-show 元素的显示、隐藏
             *  v-if 条件判断
             *  v-for 遍历数组、对象
             *  v-bind、v-model 数据绑定
             *  v-on 事件绑定
         *  过滤器
         *   *  组件内过滤器
             *  全局过滤器
         *  数据监听
         *   *  watch 监听简单类型
             *  watch 监听复杂类型（深度监听）
             *  computed 属性计算，可以同时监听多个变量
         *  事件监听

vue是国人开发js框架，国内使用广泛。以数据驱动、组件化开发为核心。

### vue基础 ###

到官网下载vue.js文件：[https://cn.vuejs.org/v2/guide/installation.html][https_cn.vuejs.org_v2_guide_installation.html]

也可以使用npm

#默认是最新稳定版，也可以用@指定版本
    npm install vue 
    # npm install vue@2.6.11

<div id="app"></div>
    <div class="red"></div>
    <div></div>
    
    
    <script src="js/vue.js"></script>
    
    <script> new Vue({ //参数是对象 el: "#app", //通过id来指定元素 // el: ".red", //通过class来指定 // el: "div", //通过标签名来指定 template: "<p>姓名：{ {name}}，年龄：{ {age}}</p>", //{ { }}可以引用变量、函数 data: function () { return { //返回对象 name: "chy", age: 20, } }, }); </script>

不管通过id、class、标签名中的哪种来指定，一个Vue对象都只作用于一个元素，Vue对象中的东西都只对该元素有效。

如果匹配到多个元素，只使用第一个匹配的元素。

如果多个Vue对象操作同一个元素，位置靠前的Vue对象优先级更高。

template

*  template会替换整个元素，并不是作为innerHTML
 *  template中要有一个根元素
 *  可以用反引号代替引号定界，尤其是模板中有引号时，使用反引号定界更方便

template: `<p>姓名：{ { name}}，年龄：{ { age}}</p>`,

*  模板可以写在Vue对象的template中，也可以直接作为元素，能解析其中的变量

data实质是一个返回对象的函数，有2种写法

data:function(){   //指向匿名函数
        return { 
            
        }  
    }
    
    
    data(){   //直接作为函数名
        return { 
            
        } 
    }

### 常用指令 ###

指令是元素属性的形式，可以直接写在元素中，也可以写在template中

#### v-text、v-html 元素内容绑定 ####

把变量的值作为innerText、innerHTML，即元素体的内容

v-text不解析变量值中的html标签，直接作为普通字符串处理；v-html会解析变量值中的html标签。

<input>输入框经常用v-model绑定值，<p>之类的文本段落常用v-text、v-html绑定值，<div>之类的容器常用v-html放入元素。

#### v-show 元素的显示、隐藏 ####

控制元素的显示、隐藏

值为true时显示，为false时隐藏。

可以直接写boolean值，但一般都是绑定变量，变量值为true时显示，为false时隐藏。

#### v-if 条件判断 ####

条件判断，值为 true 时生成对应的元素，为false则不生成

<div id="app">
        <p v-if="score<60">不及格</p>
        <p v-else-if="score<80">一般</p>
        <p v-else-if="score<=100">优秀</p>
        <p v-else>数据不合法</p>
    </div>

v-show 是在页面加载时进行渲染，v-if 是根据值的变化进行增删对应的dom元素，如果dom元素的显示、不显示非常频繁，使用 v-show 开销更小。

#### v-for 遍历数组、对象 ####

<div id="app">
        
        <ul>
            <li v-for="(item, index) in arr">第{
       {index}}项：{
       {item}}</li>
        </ul>
    
        
        <ul>
            <li v-for="(value, key) in user">{
       {key}}：{
       {value}}</li>
        </ul>
    </div>
    
    <script> new Vue({ el: "#app", data: function () { return { arr: ["手机", "平板", "电脑"], //数组 user: { name: "chy", age: 20 }, //对象 } }, }); </script>

数组的 (item, index)、对象的 (value, key) ，这些都是临时变量，名称任意，但顺序是固定的，必须是值在前面，index|key在后面。

如果是从1开始的逐步+1的正整数数组，可以简写，直接写终点

//相当于 [1,2,3]
     v-for="(item, index) in 3"

如果报错

> Custom elements in iteration require ‘v-bind:key’ directives … vue/valid-v-for

多半是因为启用了 eslint 进行检查，从vue2.2开始，v-for 需要设置key属性，加上 :key 即可，也可以禁用 eslint

<li :key="key" v-for="(value, key) in user">{
       {key}}：{
       {value}}</li>

#### v-bind、v-model 数据绑定 ####

数据绑定，将属性值与变量绑定，自动取对应的变量值

*  v-bind：单向绑定，内存（变量）-> 视图，内存数据的变化会影响到视图，视图数据的变化不会影响内存
 *  v-model：双向绑定，内存（变量） <-> 视图 相互影响，一方的修改会自动同步到另一方

<input id="app" v-bind:value="name" /> 
    
    
    <a id="app" v-bind:href="url" :class="className">xxx</a>
    
    
    <input id="app" v-bind="name" />

#### v-on 事件绑定 ####

<div id="app">
        
    
        
        <button v-on:click="count++">count</button>
    
        
        <button v-on:click="tip1">tip1</button>
    
        
        <button v-on:mouseover="tip2('hello')">tip2</button>
    
        
        <button v-on:click="tip1" v-on:mouseover="tip2('hello')">tip1+tip2</button>
    </div>
    
    <script> new Vue({ el: "#app", data: function () { return { count: 1, }; }, methods: { tip1() { //函数可以写成 函数名(){ }，也可以指向匿名函数 函数名:function(){ } alert(this.count); //如果要使用变量，直接用就是了，不用作为参数。this表示当前Vue对象 }, tip2(msg) { alert(msg); }, }, }); </script>

在方法中引用变量时，要通过this来引用

### 过滤器 ###

\{ \{var | 过滤器名\}\}，会先使用过滤器处理var，再使用处理后的值。

按作用域划分，可分为2种：组件内过滤器、全局过滤器

#### 组件内过滤器 ####

只能在对应的组件中使用

<div id="app">
        <input v-model="content" /> <br />
        <p>原来的字符串：{
       {content}}</p>  
        <p>字符串反序：{
       {content | reversal}}</p>  
    </div>
    
    <script> new Vue({ el: "#app", data: function () { return { content: "", //最初变量为null，split()会报错，需要设置初始值 }; }, filters: { //组件内过滤器 reversal(val) { //过滤器名(参数表)，会自动把|前面的变量作为实参传入 return val.split("").reverse().join(""); //字符串切分为字符数组，数组反序，数组连接为一个字符串 }, //可定义多个过滤器，逗号分隔即可 }, }); </script>

#### 全局过滤器 ####

全局可用

<div id="app">
        <input v-model="content" /> <br />
        <p>原来的字符串：{
       {content}}</p>
        <p>字符串反转：{
       {content | reversal}}</p>
    </div>
    
    <script> //全局过滤器，参数：过滤器名、处理函数 Vue.filter("reversal", function (val) { return val.split("").reverse().join(""); }); new Vue({ el: "#app", data: function () { return { content: "", } }, }); </script>

### 数据监听 ###

监听变量值（数据）的变化，当变量值变化时做一些处理。

eg. 选择省市，双向绑定，当选择的省份变化时，列出的下辖地区要变成相应的

#### watch 监听简单类型 ####

<input id="app" type="text" name="" v-model="content" />  
    
    <script> new Vue({ el: "#app", data() { return { content: "", //需要给变量赋初值 } }, watch: { content(newVal, oldVal) { //要监听的变量(新值,旧值) console.log(newVal, oldVal); if (newVal == "love") { alert("the content is love"); } }, }, }); </script>

这种方式不能监听到数组中元素、对象中key对应的value的变化。

赋初值要赋该种类型的初值，不能赋null，eg. v-for绑定数组，数组初值赋为\[ \]，如果赋为null会报错。

#### watch 监听复杂类型（深度监听） ####

如果要监听复杂类型（数组、对象）的变量，需要使用深度监听，深度监听会逐级往下监听对象的属性、数组中的元素。

<div id="app">
        姓名：<input type="text" name="" v-model="user.name" /><br />
        
        年龄：<input type="text" name="" v-model="user.age" /><br />
    </div>
    
    <script> new Vue({ el: "#app", data() { return { user: { name: "", //初始化 age: "", }, } }, watch: { user: { //要监听的复杂类型变量 deep: true, //开启深度监听 handler(newval,oldval){ //函数名只能是handler console.log(newval,oldval) }, } }, }); </script>

watch中只能逐个监听变量

#### computed 属性计算，可以同时监听多个变量 ####

<div id="app">
        加数：<input type="text" name="" v-model="n1" /><br />
        另一个加数：<input type="text" name="" v-model="n2" /><br />
        和：<span>{
       {sum}}</span>  
    </div>
    
    <script> new Vue({ el: "#app", data() { return { n1: "", n2: "", }; }, computed: { //数据监听 sum() { //函数。此处监听了n1、n2两个变量，只要有1个变量变化，就会触发函数 return Number(this.n1) + Number(this.n2); //Number(String)可以将字符串转换为数值型 }, }, }); </script>

computed: { 
    	sum: function() {   //函数也可以这样写
    	    return Number(this.n1) + Number(this.n2);  
    	},
    },

上面的函数提供了return语句，实质是一个getter方法，也可以这样写

computed: { 
        sum: { 
            //getter方法
            get() {   //也可以写成get: function(){ }的形式
                return Number(this.n1) + Number(this.n2);  
            },
            // 根据需要也可以提供setter方法
            set(addParam) {  
                this.n1=addParam.n1;
                this.n2=addParam.n2;
            },
        },
    },

使用setter方法赋值

//在Vue对象中
    this.sum={ n1:10, n2:20};
    
    
    //如果在Vue对象外，可以先把Vue对象赋给变量，通过变量来操作
    let vue=new Vue({ 
    	//.....
    });
    vue.sum={ n1:10, n2:20};

\{ \{ \}\}取值时会自动调用setter方法，赋值时会自动调用setter方法。  
computed是计算属性，以属性方式操作，以属性方式赋值，不是this.sum( \{n1:10, n2:20\} )这种函数方式赋值。

### 事件监听 ###

<div id="app">
        <button @click="fn1">btn1</button>  
        <button @click='fn2("chy",20)'>btn2</button>   
    </div>
    
    <script>
        new Vue({ 
            el: "#app",
            methods: { 
                fn1() { 
                    alert("hello btn1");
                },
                fn2(name, age) { 
                    alert(name + "\t" + age);
                },
            },
        });
    </script>

@事件=“处理”

*  事件可以是内置事件（不带on），也可以是$emit()中自定义的事件
 *  处理可以是操作变量（直接写js语句）、调用自定义函数，但不能调用alert()、console.log()等内置函数 。

[https_cn.vuejs.org_v2_guide_installation.html]: https://cn.vuejs.org/v2/guide/installation.html