vue基础语法

最新推荐文章于 2024-08-04 10:00:00 发布
最新推荐文章于 2024-08-04 10:00:00 发布
阅读量858 收藏 29
点赞数 20
分类专栏： Vue.js 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40588441/article/details/139855996
版权

vue初识

查看vue版本

vue -V

安装

npm install --global vue-cli

创建一个基于 webpack 模板的新项目

vue init webpack my-project

启动

cd my-project
npm install
npm run dev

vue框架特点

vue渐进式框架

声明式渲染

数据驱动

双向绑定

MVVM的模式

基本组成

  • el ：表示渲染的范围
  • data ：数据是一个对象
  • methods ：方法（函数）声明
  • watch：监听data中的属性变化
  • computed：计算属性（补充data中的属性），会返回一个新的值
  • filter：过滤 重新定义属性的格式或者数据的呈现方式

vue基础语法

插值操作

Mustache

Mustache语法(也就是双大括号)

image-20200922112812637

v-html

某些情况下，我们从服务器请求到的数据本身就是一个HTML代码

如果我们直接通过{{}}来输出，会将HTML代码也一起输出。

但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。

  • 如果我们希望解析出HTML展示
    • 可以使用v-html指令
      • 该指令后面往往会跟上一个string类型
      • 会将string的html解析出来并且进行渲染

image-20200922112916231

v-once

v-html

将内容编译成标签

v-text

v-text作用和Mustache一致：

v-text通常情况下，接受一个string类型

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

v-pre

v-block

属性绑定v-bind

属性的绑定v-bind：“属性名称”=”变量名（data中的）”

属性的绑定简写：“属性名称”

双标签的的内容用{{data中的属性名称}}

切换都只需要更新data中的数据即可

v-bind介绍

除了内容需要动态来决定外，某些属性我们也希望动态来绑定。

比如动态绑定a元素的href属性

比如动态绑定img元素的src属性

这个时候，我们可以使用v-bind指令：

作用：动态绑定属性

缩写：:

预期：any (with argument) | Object (without argument)

参数：attrOrProp (optional)

v-bind的基础

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值

在开发中，有哪些属性需要动态进行绑定呢？

还是有很多的，比如图片的链接src、网站的链接href、动态绑定一些类、样式等等

比如通过Vue实例中的data绑定元素的src和href，代码如下

image-20200921223016405

v-bind语法糖

属性的绑定简写：“属性名称”

 <div id="app">
        <div>{{username}}</div>
        <input :value="username">
        <input v-bind:value="username">
        <div :style="styleName">{{content}}</div>
</div>

v-bind动态绑定class

对象语法

对象语法的含义是:class后面跟的是一个对象

对象语法有下面这些用法

  • 直接通过{}绑定一个类
<h2 :class="{'active': isActive}">Hello World</h2>
  • 也可以通过判断，传入多个值(属性名是类名 属性值是boolean值)
<h2 v-bind:class="{类名1: true, 类名2: boolean}">{{message}}</h2>
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
        .error{
            color:red
        }
        .success{
            color:green
        }
    </style>

</head>
<body>
    <div id="app">
        用户名<input  v-model="username" placeholder="只能是数字字母_组成不能是数字开头长度5到10位"/><span :class="{success:issuccess,error:iserror}">{{usernametip}}</span>
        <button @click="check">检查</button> 
    </div>
</body>
<script>
    var  vm  = new  Vue({
        el:"#app",
        data:{
            username:"",
            usernametip:"请输入正确的用户名",
            usernameReg:/^[a-z_$][0-9a-z$_]{4,9}$/i,
            issuccess:false,
            iserror:true
        },
        methods:{
            check(){
                if(this.usernameReg.test(this.username)){
                    this.usernametip="√";
                    this.iserror = false;
                    this.issuccess = true;
                }else{
                    this.usernametip="请输入正确的用户名"
                    this.iserror = true;
                    this.issuccess = false;
                }

            }
        }  
    })

</script>
</html>

  • 和普通的类同时存在，并不冲突

    注：如果isActive和isLine都为true，那么会有title/active/line三个类

// 固定的class直接写，而后面可能会删除的class，则进行动态绑定
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

  • 如果过于复杂，可以放在一个methods或者computed中

    注：classes是一个计算属性

<h2 class="title" :class="classes">Hello World</h2>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>

<div id="app">
  <!--<h2 class="active">{{message}}</h2>-->
  <!--<h2 :class="active">{{message}}</h2>-->

  <!--<h2 v-bind:class="{key1: value1, key2: value2}">{{message}}</h2>-->
  <h2 v-bind:class="{类名1: true, 类名2: boolean}">{{message}}</h2>
  <h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>
  <h2 class="title" v-bind:class="getClasses()">{{message}}</h2>
  <button v-on:click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isActive: true,
      isLine: true
    },
    methods: {
      btnClick: function () {
        this.isActive = !this.isActive
      },
      getClasses: function () {
        return {active: this.isActive, line: this.isLine}
      }
    }
  })
</script>

</body>
</html>
数组语法

数组语法的含义是:class后面跟的是一个数组

数组语法有下面这些用法

  • 直接通过{}绑定一个类

    <h2 :class="['active']">Hello World</h2>

  • 也可以传入多个值

    <h2 :class=“[‘active’, 'line']">Hello World</h2>
Document
// 此时btn,btnLarge若是加引号，则当做字符串解析 // 若是不加引号，当做变量解析 按钮
```

  • 和普通的类同时存在，并不冲突

    注：会有title/active/line三个类

    <h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>

  • 如果过于复杂，可以放在一个methods或者computed中

    注：classes是一个计算属性

    <h2 class="title" :class="classes">Hello World</h2>

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2 class="title" :class="[active, line]">{{message}}</h2>
  <h2 class="title" :class="getClasses()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      active: 'aaaaaa',
      line: 'bbbbbbb'
    },
    methods: {
      getClasses: function () {
        return [this.active, this.line]
      }
    }
  })
</script>

</body>
</html>

v-bind动态绑定style

对象语法
<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>

<!--'50px'必须加上单引号, 否则是当做一个变量去解析-->
<!--<h2 :style="{fontSize: '50px'}">{{message}}</h2>-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .title {
      font-size: 50px;
      color: red;
    }
  </style>
</head>
<body>

<div id="app">
  <!--<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>-->

  <!--'50px'必须加上单引号, 否则是当做一个变量去解析-->
  <!--<h2 :style="{fontSize: '50px'}">{{message}}</h2>-->

  <!--finalSize当成一个变量使用-->
  <!--<h2 :style="{fontSize: finalSize}">{{message}}</h2>-->
  <h2 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor}">{{message}}</h2>
  <h2 :style="getStyles()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      finalSize: 100,
      finalColor: 'red',
    },
    methods: {
      getStyles: function () {
        return {fontSize: this.finalSize + 'px', backgroundColor: this.finalColor}
      }
    }
  })
</script>

</body>
</html>
数组语法
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2 :style="[baseStyle, baseStyle1]">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      baseStyle: {backgroundColor: 'red'},
      baseStyle1: {fontSize: '100px'},
    }
  })
</script>

</body>
</html>

事件监听

方法绑定

方法的绑定的v-on：click=“methods中的方法名称”

简写@click="方法名称”

v-on介绍

在前端开发中，我们需要经常和用于交互。

这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等

在Vue中如何监听事件呢？使用v-on指令

v-on****介绍

作用：绑定事件监听器

缩写：@

预期：Function | Inline Statement | Object

参数：event

v-on基础

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

v-on参数

当通过methods中定义方法，以供@click调用时，需要注意参数问题：

  • 情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。

    但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去

  • 情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件

image-20200922094751327

v-on修饰符

在某些情况下，我们拿到event的目的可能是进行一些事件处理。

Vue提供了修饰符来帮助我们方便的处理一些事件：

.stop - 调用 event.stopPropagation()。

.prevent - 调用 event.preventDefault()。

.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

.native - 监听组件根元素的原生事件。

.once - 只触发一次回调

双向绑定

v-model

  • set/get
  • Object.defineProperty
商品数量<input v-model="goodsnum"/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        商品数量<input v-model="goodsnum"/>
        商品价格<input v-model="goodsprice"/>
        总价<input  :value="goodsprice*goodsnum"/>
        <button @click="submit">提交</button>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            goodsnum:100,
            goodsprice:2
        },
        methods:{
            submit(){
                console.log(this.goodsnum);
                console.log(this.goodsprice);
            }
        }
    })


</script>
</html>

双向绑定的问题

两个元素同时双向绑定，会有问题，需要使用事件改造其中一个双向绑定

原生实现双向绑定

  • html结构如下

    <div id="app">
        商品数量<input id="goodsnum">
        商品价格<input id="goodsprice" >
        总价<input  id="total" />
</div>

  • script中的js如下

    <script>
//set设置 给对象的属性设置值  a="leson"
//get得到  获取对象的属性值   a
    var  goodsnumInput =document.getElementById("goodsnum");
    var  goodspriceInput = document.getElementById("goodsprice");
    var  totalInput = document.getElementById("total");

    var  goodsInfo  = {
        goodsnum:100,
        goodsprice:5,
        // set _num(num){
        //     this.goodsnum  = num;

        //     this.total;
        // },
        // set _price(price){
        //     this.goodsprice  = price;
        //     this.total;
        // },
        // get  total(){
        //     totalInput.value  = this.goodsnum * this.goodsprice;
        // }
    }

    Object.defineProperty(goodsInfo,"_num",{
        set(num){
            this.goodsnum = num;
            this.total;
        }
    })
    Object.defineProperty(goodsInfo,"_price",{
        set(price){
            this.goodsprice = price;
            this.total;
        }
    })
    Object.defineProperty(goodsInfo,"total",{
        get(){
           totalInput.value  = this.goodsnum * this.goodsprice;
        }
    })




    goodsnumInput.value = goodsInfo.goodsnum;
    goodspriceInput.value =goodsInfo.goodsprice;
    totalInput.value = goodsInfo.goodsnum*goodsInfo.goodsprice;

    goodsnumInput.oninput = function(){
        goodsInfo._num = goodsnumInput.value;//数据更新
    }

    goodspriceInput.oninput = function(){
        goodsInfo._price = this.value;//数据更新
    }
</script>

条件语句

v-if

v-if、v-else-if、v-else

  • v-if的原理：
  • v-if后面的条件为false时，对应的元素以及其子元素不会渲染。
  • 也就是根本没有不会有对应的标签出现在DOM中

<div id="app">
    {{rand}}
    <div v-if="rand>80">
        优秀
    </div>
    <div v-else-if="rand>70">
        良好
    </div>
    <div v-else-if="rand>60">
        及格
    </div>
    <div v-else="rand<70">
        不及格
    </div>
</div>

    <script>
        new Vue({
            el:"#app",
            data:{
                score:"",
                rand:Math.round(Math.random()*100)
            },
            methods:{

            }
        })
    </script>

</html>

条件渲染案例

 <div id="app">
     <div v-if="flag">
         显示隐藏切换
     </div>
     <button @click="change">{{text}}</button>
</div>

<script>
        new Vue({
            el:"#app",
            data:{
                flag:true,
                text:"隐藏"
            },
            methods:{
                change(){
                    if(this.flag == true){
                        this.text = "出现";
                        this.flag=false;
                    }else{
                        this.text = "隐藏";
                        this.flag=true;
                    }

                }
            }

        })
    </script>

v-show

频繁切换用v-show

节点一直存在 不会消失

表达式结果为false，就隐藏，否则就是显示

v-i和v-show对比

v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？

  • v-if 满足条件才会生成页面节点，当条件为false时，压根不会有对应的元素在DOM中

  • v-show 节点一直存在 不会消失，表达式结果为false，就隐藏，否则就是显示

    当条件为false时，仅仅是将元素的display属性设置为none而已

相关思考：重绘和重排

开发中如何选择呢？

当需要在显示与隐藏之间切片很频繁时，使用v-show

当只有一次切换时，通过使用v-if

循环语句

v-for 指令

v-for循环范围

循环1-10的整数，

注意：i是从1开始

image-20200922150817613

用v-if，判断当i>5时，变相实现循环5-10

image-20200922151054982

image-20200922151105319

  • for的优先级高于if

v-for 指令需要以 site in sites 形式的特殊语法

sites 是源数据数组 并且 site 是数组元素迭代的别名

<li v-for="(item,index)  in  menuList" :class="{selected:index==selectedIndex}" @click="clickLI(index)" >
     {{item}}{{index}}
</li>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
        .error{
            color:red
        }
        .success{
            color:green
        }
        .selected{
            color:red
        }
        .hide{
            display: none;
        }
    </style>

</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index)  in  menuList" :class="{selected:index==selectedIndex}" @click="clickLI(index)" >
                {{item}}{{index}}
            </li>
        </ul>
        <ul>
            <li v-for="(item,index) in contentList" :style="{
                display:(index==selectedIndex?show:hide)
            }">
                {{item}}
            </li>
        </ul>
    </div>
</body>
<script>


    var  vm  = new  Vue({
        el:"#app",
        data:{
            menuList:["菜单一","菜单二","菜单三","菜单四"],
            selectedIndex:0,
            contentList:["内容一","内容二","内容三","内容四"],
            hide:"none",
            show:"block"
        },
        methods:{
            clickLI(index){
                this.selectedIndex = index;
            }
        }  
    })

</script>
</html>

v-for遍历数组

当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。

v-for的语法类似于JavaScript中的for循环。

格式如下：item in items的形式。

我们来看一个简单的案例：

如果在遍历的过程中不需要使用索引值

v-for=“movie in movies”

依次从movies中取出movie，并且在元素的内容中，我们可以使用Mustache语法，来使用movie

如果在遍历的过程中，我们需要拿到元素在数组中的索引值呢？

语法格式：v-for=(item, index) in items

其中的index就代表了取出的item在原数组的索引值。

image-20200922141334788

v-for遍历对象

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

组件的key属性

image-20200923095949505

检测数组更新

  • 因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。
  • Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

添加删除数组元素，均影响原数组

find()

查找第一个符合条件的数组元素。它的参数是一个回调函数

  • 在回调函数中可以写你要查找元素的条件，当条件成立为true时，

  • 返回该元素。如果没有符合条件的元素，返回值为undefined

  • 参数：

    第一个：执行的回调函数

    • 回调函数有三个参数

      • value：当前的数组元素
      • index：当前索引值
      • arr：被查找的数组
      const myArr=[1,2,3,4,5,6];
var v=myArr.find((value,index,arr)=>{
    return index==4
});
console.log(v);// 5

    第二个：指定回调函数的this对象

find()方法不会更改原始数组

var Arr = [1,2,3,4,5,6,7,8,9,10]
 
//获取数组Arr中第一个大于5的元素
var newArr = Arr.find(function(item){
    return item > 5
})
 
console.log(newArr)  // 6
 
console.log(Arr)    // [1,2,3,4,5,6,7,8,9,10]
findIndex()

findIndex()与find()的使用方法相同

  • 只是当条件为true时findIndex()返回的是索引值，而find()返回的是元素
  • 如果没有符合条件元素时findIndex()返回的是-1，而find()返回的是undefined

findIndex()当中的回调函数也是接收三个参数，与find()相同

array.findIndex(callback, thisArg)

array.findIndex(function(element, index, arr), thisArg)

var num = [1, 30, 39, 29, 10, 13];
var val = num.findIndex(myFunc);

function myFunc(element) {
return element >= 18;
}
indexOf(数组元素)

indexOf[‘要查找的字符’,[起始位置]]

第二个参数起始位置是 可选参数

  • indexOf(数组元素) 作用就是返回该数组元素的索引号，从前面开始查找
  • 它只返回第一个满足条件的索引号，只找第一个
  • 如果找不到该元素，则返回-1
var arr = ['red', 'green', 'blue', 'pink'];
console.log(arr.indexOf('blue'));
includes() 判断数组中是否含有某个元素
  • 存在该元素，返回true
  • 不存在该元素，返回false
  • 不影响原数组
var arr = ['red', 'green', 'blue', 'pink'];
console.log(arr.includes('blue'));
splice

通过删除或替换现有元素或者原地添加新的元素来修改数组

并以数组形式返回被修改的内容。

此方法会改变原数组。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

splice之删除
  • splice(startIndex, n)
  • startIndex起始下标
  • n 要删除的个数
  • 返回值是被删除的元素 形参的数组
  • 影响原数组
var list = ['a', 'b', 'c','d'];
list.splice(1,1);
splice之新增
  • startIndex起始下标
  • 0 表示要删除0个
  • splice(startIndex, arg1,agr2…agrN) 字第三个参数开始 代表新增的元素
  • 返回值是空数组 => 没有删除元素
  • 影响原数组
var list = ['a', 'b', 'c','d'];
list.splice(2,0,'hello');
splice之修改
  • 先删除，再新增同等个数
  • startIndex起始下标
  • 0 要删除0个
  • 返回值是被删除元素组成的数组
  • splice(startIndex, arg1,agr2…agrN) 字第三个参数开始 代表新增的元素
var list = ['a', 'b', 'c','d'];
// 删除几个，就新增几个
list.splice(2,2,'hello','hello');
map 遍历数组

  • 不改变原数组，返回操作后的数组

  • 将回调函数的返回值，用新数组保存，返回

var list = [1, 9, 6 ,2];
list.map(function (item,index){
    console.log(item,index);
}
             
//
var arr = list.map(function (item,index){
     // return item + 10;
     // return index + 1
}
// 新数组
console.log(arr)
filter 把满足条件的元素筛选出来，放到新数组中

  • 不改变原数组，返回操作后的数组

  • 回调函数返回一个条件，return一个条件表达式

  • 把满足条件的元素筛选出来，放到新数组中

var list = [1, 9, 6 ,2];
var newArr = list.filter(function (item,index){
    return item % 2 == 0;
}
console.log(newArr);
some 只要有一个满足，则返回true
  • return一个表达式
  • 只要有一个满足，则返回true
  • 都不满足，返回false
var list = [1, 9, 6 ,2];
var flag = list.some(function (item,index){
    return item > 90;
}
// 没有则返回false
console.log(flag);
every 判断每一个元素是否都满足条件
  • 全部满足，则返回true
  • 有一个不满足，返回false
var list = [1, 9, 6 ,2];
var flag = list.every(function (item,index){
    return item > 0;
})
// 满足返回true
console.log(flag);

computed计算属性

补充data的

计算属性是有返回值的

数据要做展示，但是在展示之前，需要对他们做一些结合或者变化，再展示，即，需要使用计算属性

但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示

我们调用它的时候，就把它当成一个属性来调用就行。

  • 比如我们有firstName和lastName两个变量，我们需要显示完整的名称。
  • 但是如果多个地方都需要显示完整的名称，我们就需要写多个
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    用户名:<input v-model="username"  />
    <span>{{usernametip}}</span>
    <br/>
</div>
</body>
<script>
    new  Vue({
        el:"#app",
        data:{
            datasource:["leson","lili","lulu"],
            username:"",
        },
        computed:{
            usernametip(){
               if(this.datasource.find(item=>item==this.username)){
                    return  "该用户名不可用";
               }else{
                   return  "该用户名可用"
               }
            }
        }
    })


</script>
</html>

watch 监听属性

watch 来响应数据的变化（只能监听一层）

它可以用来监测Vue实例上的数据变动

没有返回值

watch是什么

  • 监测 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值，用一个函数取代。
  • 简洁的说：watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。

watch选项

  • 类型：{ [key: string]: string | Function | Object | Array }
  • 详细：一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例i化时调用 $watch()，遍历 watch 对象的每一个属性
  • 通俗解释：watch选项能够监听值的变化
<div>
      <p>Number: {{ myNumber }}</p>
      <p>Number: <input type="text" v-model.number="myNumber"></p>
</div>
 
new Vue({
  el: '#root',
  data: {
    myNumber: 'Dawei'
  },
  watch: {
    myNumber(newVal, oldVal) {
      console.log('newVal', newVal);
      console.log('oldVal', oldVal);
    }
  } 
})

handler方法

  • handler方法就是你watch中需要具体执行的方法

immediate属性

  • immediate为true时则立即触发回调函数；

    第一次就会触发监听

    如果为false，则和下面的例子一样，不会立即执行回调

    <div>
      <p>Number: {{ myNumber }}</p>
      <p>Number: <input type="text" v-model.number="myNumber"></p>
</div>
 
new Vue({
  el: '#root',
  data: {
    myNumber: 'Dawei'
  },
  watch: {
        myNumber: {
            handler(newVal, oldVal) {
                console.log('newVal', newVal);
                console.log('oldVal', oldVal);
            },
            immediate: true
        }
    } 
})

deep属性

watch用法

vue.js中watch的六种用法（附实例解析）

在vue中，使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法

首先确认watch是一个对象，一定要当做对象来用

简单写法
<input type="text" v-model="cityName"/> 

new Vue({
  el: '#root',
  data: {
    cityName: 'shanghai'
  },
  watch: {
    cityName(newName, oldName) {
      // ...
    }
  } 
})
使用监听处理函数

直接写一个监听处理函数，当每次监听到 cityName 值发生改变时，执行函数。也可以在所监听的数据后面直接加字符串形式的方法名：

watch: {
    cityName: 'nameChange'
    }
 } 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    用户名:<input v-model="username"  />
    <span>{{usernametip}}</span>
    <br/>
</div>
</body>
<script>
    new  Vue({
        el:"#app",
        data:{
            datasource:["leson","lili","lulu"],
            username:"",
            usernametip:""
        },
        watch:{
            username(newValue,oldValue){
                if(this.datasource.indexOf(newValue)==-1){
                    this.usernametip="该用户名可用"
                }else{
                    this.usernametip="该用户名不可用"
                }
            }

        }
    })


</script>
</html>

deep深度监听

一般对象或者集合，采用深度监听

image-20200922165912517

image-20200923101636504

注销监听

deep是在对象中层层遍历，并在监听对象上的每一个属性上都添加监听，固然也会损耗性能

但对于组件开发的情况下是不存在，监听事件会随着组件的销毁而销毁

而在组件外声明的监听事件，我们需要使用unWatch方法注销，防止内存溢出

filter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        日期:{{date|filterDate("yyyy年mm月dd日")}}
    </div>
</body>
<script>
Date.prototype.dateFormat=function(str){
    var  year  = this.getFullYear();
    var  month  = this.getMonth()+1;
    var  day   = this.getDate();

    return  str.replace("yyyy",year).replace("mm",month).replace("dd",day);

}

    new Vue({
        el:"#app",
        data:{
            date:new  Date()
        },
        filters:{
            filterDate(value,str){
                return new Date(value).dateFormat(str)
            }
        }
    })

</script>
</html>

对象的继承

通过__proto__进行对象继承

若梦plus
关注
专栏目录
【vue 进阶指南 一】多语言国际化（中英文切换）
cometang--唐家世少
10-18 1027
vue + element-ui + vue-i18n 多语言国际化 1.element-ui 并不支持最新版的vue-i8n 插件，开发时注意i18n的版本，当然本示例成功解决版本不兼容的问题，详细说明请看element官方文档：http://element-cn.eleme.io/#/zh-CN/component/i18n 2.当前引入模式兼容了element-ui，如果未引入elem...
Vue入门
BAIQW的博客
07-07 825
vue是一个构建用户界面UI的渐进式javascript框架，渐进式的框架是指可以一步一步的由浅入深的去使用这个框架，该框架可以逐步引入项目。作者：尤雨溪vue官网 https://cn.vuejs.org/1.体积小 压缩后33k左右，体积小意味着下载速度很快。运行快，数据传输快。2.更高的运行效率 基于虚拟dom，一种预先通过javascript进行各种计算，把最终的DOM操作计算出来并进行优化的技术。所谓虚拟dom指的是对真实dom的一种模拟。相对于直接操作真实dom，我们构建一棵虚拟的dom树，将各
十分钟速通 Vue 动态 Class、Style
最新发布
oageux的博客
08-04 1862
小白带你速通 Vue 动态 Class、Style
vue多语言
搬砖猴哥
03-01 1110
vue中实现语言切换的方式如何实现的 1.NPM 项目安装 cnpm i vue-i18n 2.使用方法 /* 国际化使用规则 */ import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) &lt;!-- 需要国际化的数据定义在此处 --&gt; const messages = { en: { m...
VUE是基于什么语言
yang114544的博客
07-07 1万+
vue.js简介 Vue.js读音 /vjuː/, 类似于 view Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增。 Vue.js可以作为一个js库来使用，也可以用它全套的工具来构建系统界面，这些可以根据项目的需要灵活选择，所以说，Vue.js是一套构建用户界面的渐进式框架。 Vue的核心库只关注视图层，Vue的目标是通过尽可能简单的 API 实现响应的数据绑定，在这一点上Vue.j
Vue多语言教程
文摘资讯
01-09 291
初始化项目Create Vue 项目和 install vue-i18nvue create vue-multilang 使用vue-i18n加载语言包// src/main.js ...
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
Vue 基础语法 实例演示 示例代码
07-17
Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例...
vue基础语法练习源码
12-09
在这个名为"vue基础语法练习源码"的资源中，我们将会探索一些Vue的基础概念和语法，包括HTML文件中的Vue应用实践，如过滤器、自定义插件以及列表渲染等。 首先，让我们深入了解Vue的基础语法。Vue实例是整个应用的...
Vue基础语法
qq_52262541的博客
04-10 1148
Vue模板语法有2大类： 1.插值语法： 功能：用于解析标签体内容。 写法：{{XXX}}，XXX是Js表达式，且可以直接读取到date中的所有属性。 2.指令语法： 功能：用于解析标签（包括：标签属性、标签内容、绑定事件…）。 举例：v-bind:href=“XXX” 或简写为：href=“XXX”,XXX同样要写js表达式，且可以直接读取到date中的所有属性。 备注：Vue中有很多的指令，且形式都是：v-???,此处我们只是拿v-bind举个例子。 Vue中有2种数据绑定的方式： 1.单向绑定
vue多语言应用
前端精髓
01-09 1118
初始化项目 Create Vue 项目和 install vue-i18n vue create vue-multilang 使用vue-i18n加载语言包 创建语言文件 多语言文件的统一入口，加载各种语言文件 // src/lang/index.js import zh from './translations/zh.json' import en from './translatio...
vue的多语言化
喜欢
03-19 207
vue的多语言化 安装依赖包 npm install vue-i18n 2.在main.js中引入 import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n = new VueI18n({ locale: 'zh', // 语言标识 messages: { 'zh': require('./i1...
vue中自定义设置多语言(包括使用vue-i18n)，并且运行js脚本自动生成多语言文件
weixin_52663662的博客
07-03 1404
可以自己编写一个设置多语言文件在项目新建js文件，命名为：language.js，代码如下// language.js 文档CN: {frame_rules: "规则",frame_remark: "虚位拟待",},EN: {},IN: {},VI: {},MS: {},TH: {},HI: {},// 获取我们设置存放在浏览器的sessionStorage 的语言类型// // 阿拉伯语 展示顺序会相反，设置反向，使语言展示正常// }// zh 中文。
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
CYK_byte的博客
10-16 2万+
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
Vue语法简介（入门推荐）
NXBBC的博客
03-01 3186
vue简单语法介绍和简单实例
Vue基础语法知识（自用，完整版）
m0_62068678的博客
09-12 9554
vue基础语法、尚硅谷、欢迎交流
vue中开发多语言（国际化）,vue+i18n（详细教程）
weixin_51220466的博客
04-01 1万+
vue中开发多语言（国际化）,vue+i18n（详细教程）
工作笔记八——vue项目的多语言/国际化插件vue-i18n详解
热门推荐
袁杰Jerry
06-24 4万+
今天介绍vue开发中用的最多的国际化插件：vue-i18n。本文主要参考官网文档，并且结合项目实际需要做了些改进。欢迎围观。
Vue基础语法详解及项目构建规范介绍
Vue是一种流行的JavaScript框架，它具有简单易用的语法和强大的功能，使得构建单页面应用程序变得更加容易。在Vue的项目中，有一些重要的概念需要理解和掌握。 首先，Vue中使用的一些重要概念包括单页面应用程序、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值