vue grammer one

本文所有内容均来自书籍《vue.js实战》

完整代码请查看github

v-model

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title>Hello world</title>

</head>

<body>

	<div id="app">

		<input type="text" v-model="name" placeholder="your name">

		<h1>Hello,{{ name }}</h1>

	</div>

	<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

	<script>

		var app = new Vue({

		<!-- #app为某个元素的id -->

			el:'#app',

			data: {

				name: ''

			}

		})

	</script>

</body>

</html>

为缩减篇幅，本文后面所以代码都只给出body标签内的内容

v-html 、v-pre

<div id="app">

    <span v-html="link"></span>

</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<script>

    var app = new Vue({

        el:'#app',

        data: {

            link: '<a href="#">这是一个链接</a>'

        }

    })

</script>

<div id="app">

    <span v-pre>{{只为显示双大括号}}</span>

</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<script>

    var app = new Vue({

        el:'#app',

        data: ''

    })

</script>

三元运算符，四则运算

<div id="app">

    <!-- Vue .js 只支持单个表达式，不支持语句和流控制 -->

    {{ number / 10 }}

    {{ isOK ? 'Y' : 'N' }}

    {{ text.split(',').reverse().join(',') }}

</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<script>

    var app = new Vue({

        el:'#app',

        data: {

            number: 100,

            isOK: false,

            text: '123,456'

        }

    })

</script>

过滤器

<div id="app">

    {{ date | formatDate}}<!-- 使用过滤器格式化时间 -->

</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<script>

    var padDate = function(value) {

        return value < 10 ? '0' + value : value

    };

    var app = new Vue({

        el:'#app',

        data: {

            date : new Date()

        },

        filters: {

            formatDate: function(value) {

                var date = new Date(value);

                var year = date.getFullYear();

                var month = padDate(date.getMonth()+1);

                var day = padDate(date.getDate());

                var hours = padDate(date.getHours());

                var minutes = padDate(date.getMinutes());

                var seconds = padDate(date.getSeconds());

                return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds

            }

        },

        mounted: function() {

            var _this = this;// 声明一个变量指向Vue实例this,保证作用域一致

            this.timer = setInterval(function() {

                _this.date = new Date(); // 修改数据

            }, 1000);

        },

        beforeDestroy: function() {

            if(this.timer) {

                clearInterval(this.timer);

            }

        }

    })

</script>

过滤器应当用于处理简单的文本转换，如果要实现更为复杂的数据变换，应该使用计算属性

v-bind

<div id="app">

    <a v-bind:href="url">链接</a>

    <img v-bind:src="imgUrl">

</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<script>

    var app = new Vue({

        el:'#app',

        data: {

            url : 'https://www.github.com',

            imgUrl : 'https://gitee.com/jack541/repo-for-pic-go/raw/master/img/image-20220102162032176.png'

        }

    })

</script>

以下两句等效：

<a v-bind:href="url">链接</a>

<a :href="url">链接</a>

v-on

<div id="app">

    <p v-if="show">这是一段文本</p>

    <button v-on:click="handleClose">点击隐藏</button>

</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<script>

    var app = new Vue({

        el:'#app',

        data: {

            show : true

        },

        methods: {

            handleClose: function(){

                if (this.show == true)

                    this.show = false;

                else

                    this.show = true;

            }

        }

    })

</script>

以下两句等效：

<button v-on:click="handleClose">点击隐藏</button>

<button @click="handleClose">点击隐藏</button>

computed属性用法

<div id="app">

    {{ reversedText }}

</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<script>

    var app = new Vue({

        el:'#app',

        data: {

            text: '123,456'

        },

        computed: {

            reversedText: function() {

                return this.text.split(',').reverse().join(',');

            }

        }

    })

</script>

<div id="app">

    总价:{{ prices }}

</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<script>

    var app = new Vue({

        el:'#app',

        data: {

            package1: [

                {

                    name: 'iPhone 13 128G',

                    price: 5999,

                    count: 3

                },{

                    name: 'iPad mini6',

                    price: 3799,

                    count: 5

                }

            ],

            package2: [

                {

                    name: 'iPhone 13 pro 256G',

                    price: 8999,

                    count: 3

                },{

                    name: 'Mac Pro intel i9 1TB SDD 32G RAM',

                    price: 21999,

                    count: 1

                }

            ]

        },

        computed: {

            prices : function() {

                var prices = 0;

                for (var i = 0; i < this.package1.length; i++) {

                    prices += this.package1[i].price * this.package1[i].count;

                }

                for (var i = 0; i < this.package2.length; i++) {

                    prices += this.package2[i].price * this.package2[i].count;

                }

                return prices;

            }

        }

    })

</script>

setter getter

<div id="app">

    姓名:{{ fullName }}

</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<script>

    var app = new Vue({

        el:'#app',

        data: {

            firstName: 'jack',

            lastName: 'green'

        },

        computed: {

            fullName: {

                //getter 用于读取

                get: function () {

                    return this.firstName + ' ' + this.lastName;

                },

                // setter 写入时出发

                set: function (newValue) {

                    var names = newValue.split(' ');

                    this.firstName = names[0];

                    this.lastName = names[names.length - 1];

                }

            }

        }

    })

</script>

计算缓存

计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时，它才会重新取值。

<div id="app">

    <!-- 注意，这里的 reversedText是方法，所以要带()-->

    {{ reversedText() }}

</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<script>

    var app = new Vue({

        el:'#app',

        data: {

            text: '123,456'

        },

        methods: {

            reversedText: function() {

                return this.text.split(',').reverse().join(',');

            }

        }

    })

</script>

使用 v-bind切换class属性

<div id="app">

    <div :class="{ 'active': isActive, 'error': isError }"></div>

</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<script>

    var app = new Vue({

        el:'#app',

        data: {

            isActive: true,

            isError: false

        }

    })

</script>

当:class 的表达式过长或逻辑复杂时，还可以绑定一个计算属性，这是一种很友好和常见的用法，一般当条件多于两个时，都可以使用data 或computed。

<div id="app">

    AA<div :class="classes"></div>

</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<script>

    var app = new Vue({

        el:'#app',

        data: {

            isActive: true,

            error: null

        },

        computed: {

            classes: function() {

                return {

                    active: this.isActive && !this.error,

                    'text-fail': this.error && this.error.type === 'fail'

                }

            }

        }

    })

</script>

数组语法

data 定义

<div id="app">

    <div :class="[{ 'active' : isActive }, errorCls]"></div>

</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<script>

    var app = new Vue({

        el:'#app',

        data: {

            isActive: true,

            errorCls: 'error'

        },

    })

</script>

computed定义

<div id="app">

    <button :class="classes"></button>

</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<script>

    var app = new Vue({

        el:'#app',

        data: {

            size: 'large',

            disabled: true

        },

        computed: {

            classes: function() {

                return [

                    'btn',

                    {

                    // 定义btn大小，不为空的时候就为size的尺寸

                        ['btn-' + this.size]: this.size != '',

                    // 定义button是否可用

                        ['btn-disabled']: this.disabled

                    }

                ]

            }

        }

    })

</script>

NOTES: 使用计算属性给元素动态设置类名，在业务中经常用到，尤其是在写复用的组件时，所以在开发过程中，如果表达式较长或逻辑复杂，应该尽可能地优先使用计算属性。

绑定style

<div id="app">

    <div :style="styles">文本</div>

    <!-- 应对多个对象时可以使用数组语法 styleA相当于一个data中的styles元素 -->

    <!-- <div :style="[styleA, styleB] " >文本</d iv> -->

</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<script>

    var app = new Vue({

        el:'#app',

        data: {

            styles :{

                color: 'red',

                fontSize: 14+'px'

            }

        }

    })

</script>

在实际业务中，： style 的数组语法并不常用，因为往往可以写在一个对象里面；而较为常用的应当是计算属性。

v-cloak

<div id="app" v-cloak>

    {{ message }}

</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<script>

    var app = new Vue({

        el:'#app',

        data: {

            message: '页面正在加载中……'

        }

    });

</script>

v-once

作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。

<div id="app">

    <span v-once> {{ message }}</span>

    <div v-once>

        <span> {{ message }} </span>

    </div>

</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<script>

    var app = new Vue({

        el:'#app',

        data: {

            message: '这是一段文本'

        }

    })

</script>

v-if v-else-if v-else

<div id="app">

    <p v-if="status === 1"> 当status为1时显示该行</p>

    <p v-else-if="status === 2"> 当status为2时显示该行</p>

    <p v-else>否则显示该行</p>

</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<script>

    var app = new Vue({

        el:'#app',

        data: {

            status: 1

        }

    })

</script>

v-else-if 要紧跟v-if, v-else 要紧跟v-else-if 或v-if, 表达式的值为真时，当前元素／组件及所

有子节点将被渲染，为假时被移除

template 复用元素

<div id="app">

    <template v-if="type === 'name'">

        <label>用户名：</label>

        <input placeholder="输入用户名">

    </template>

    <template v-else>

        <label>邮箱：</label>

        <input placeholder="输入邮箱">

    </template>

    <button @click="handleToggleClick">切换输入类型</button>

</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<script>

    var app = new Vue({

        el:'#app',

        data: {

            type: 'name'

        },

        methods: {

            handleToggleClick: function () {

                this.type = this.type === 'name' ? 'mail' : 'name';

            }

        }

    })

</script>

如果不希望复用input框，可以使用Vue.js 提供的key 属性，它可以让你自己决定是否要复用元

素， key 的值必须是唯一的。

<template v-if="type === 'name'">

    <label>用户名：</label>

    <input placeholder="输入用户名" key="name-input">

</template>

<template v-else>

    <label>邮箱：</label>

    <input placeholder="输入邮箱" key="mail-input">

</template>

v-show

<div id="app">

    <p v-show="status === 1">当status为1时显示该行</p>

</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<script>

    var app = new Vue({

        el:'#app',

        data: {

            status: 2

        }

    })

</script>

v-show 不能在<template>上使用。

若表达式v-if初始值为false, 则一开始元素／组件并不会渲染，只有当条件第一次变为真时才开始编译。而v-show 只是简单的CSS属性切换，无论条件真与否，都会被编译。相比之下， v-if 更适合条件不经常改变的场景，因为它切换开销相对较大，而v-show 适用千频繁切换条件。

v-for

<div id="app">

    <ul>

        <li v-for="book in books">{{ book.name }}</li>

        <!-- <li v-for="book of books">{{ book.name }}</li> -->

    </ul>

</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<script>

    new Vue({

        el: '#app',

        data: {

            books: [

                {name : '《Vue.js实战》'},

                {name : '《JavaScript 语言精粹》'},

                {name : '《JavaScript 高级程序设计》'}

            ]

        }

    })

</script>

参考文献：书籍《vue.js实战》

转载请注明原文地址

vue grammer one的更多相关文章

Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
Vue + Webpack + Vue-loader 系列教程（2）相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
关于Vue.js 2.0 的 Vuex 2.0，你需要更新的知识库
应用结构实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...
Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？
引言你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么在之前,React和Em ...

随机推荐

GO 总章
GO 学习资源 go 代理 GO 语言结构 GO 数字运算 GO 时间处理 GO 定时器 GO 异常处理 go recover让崩溃的程序继续执行 GO Exit Fatal panic GO 通过进 ...
NSMutableArray-->NSString
1.如何把NSMutableArray 转化为NSString//用字符将NSArray中的元素拼接起来 NSArray *array = [NSArray arrayWithObjects:@&qu ...
Python实战之MySQL数据库操作
1. 要想使Python可以操作MySQL数据库,首先需要安装MySQL-python包,在CentOS上可以使用一下命令来安装 $ sudo yum install MySQL-python 2. ...
IDE搬进浏览器里——JetBrains Projector
发展提起 JetBrains,你会想到什么?各路强大的 IDE,比如 Android Studio.IDEA.WebStorm--这些对于开发者来说耳熟能详的产品都出自这家公司,这些 IDE 的功能 ...
Dubbo多注册中心
一.创建提供者08-provider-registers (1) 创建工程直接复制05-provider-group工程,并命名为08-provider-registers (2) 修改配置文件二 ...
基于spring sringmvc mybatis 做的导入导出
导入 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://ww ...
拷贝txt文本中的某行的数据到excel中
package com.hope.day01;import java.io.*;import java.util.ArrayList;public class HelloWorld { publ ...
HDC2021技术分论坛：如何高效完成HarmonyOS分布式应用测试？
作者:liuxun,HarmonyOS测试架构师 HarmonyOS是新一代的智能终端操作系统,给开发者提供了设备发现.设备连接.跨设备调用等丰富的分布式API.随着越来越多的开发者投入到Harmon ...
再识ret2syscall
当初学rop学到的ret2syscall,对int 0x80中断了解还不是很深,这次又复习了一遍.虽然很简单,但是还是学到了新东西.那么我们就从ret2syscall开始吧. IDA一打开的时候,就看 ...
ORM-数据库命令操作包装实例对象学习
http://www.cnblogs.com/alex3714/articles/5978329.html python 之路,Day11 - sqlalchemy ORM 本节内容 ORM介绍 ...