vue grammer one
本文所有内容均来自 书籍《vue.js实战》
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 ...
随机推荐
- WebService学习总览
[1]WebService简介 https://blog.csdn.net/xtayfjpk/article/details/12256663 [2]CXF中Web服务请求处理流程 https://b ...
- java多线程 并发编程
一.多线程 1.操作系统有两个容易混淆的概念,进程和线程. 进程:一个计算机程序的运行实例,包含了需要执行的指令:有自己的独立地址空间,包含程序内容和数据:不同进程的地址空间是互相隔离的:进程拥有各种 ...
- docker安装jumpserver
注意MySQL的密码设置要有复杂度,否则jumpserver用不了 #先准备一台服务器安装MySQL和redis(注意官网版本要求) root@ubuntu:~# docker pull mysql: ...
- UNIX基本命令
### 1. 必学命令 help [子命令] : 查看某一个具体的子命令的使用方法### 2. 常用命令 - cd path : 将当前路径切换到path路径 - pwd : 查看当前所在路径 - l ...
- JDBC(1)：JDBC介绍
一,JDBC介绍 SUN公司为了简化.统一对数据库的操作,定义了一套Java操作数据库的规范(接口),称之为JDBC.这套接口由数据库厂商去实现,这样,开发人员只需要学习jdbc接口,并通过jdbc加 ...
- maven依赖对zookeeper的版本冲突问题
我用的是springcloudAlibaba+zookeeper zookeeper下载后 1,修改配置文件,conf目录下的zoo_sample.cfg修改为zoo.cfg. 2,打开zoo.cfg ...
- Vector Bin Packing 华为讲座笔记
Vector bin packing:first fit / best fit / grasp 成本:性价比 (先验) 设计评价函数: evaluation function:cosine simil ...
- opencv学习(四)——轨迹栏作为调色板
轨迹栏作为调色板 在这里,我们将创建一个简单的应用程序,以显示指定的颜色.有一个显示颜色的窗口,以及三个用于指定B.G.R颜色的轨迹栏.滑动轨迹栏,并相应地更改窗口颜色.默认情况下,初始颜色将设置为黑 ...
- TSN 时间敏感网络：缘起 （TSN历史与现状）
前言 随着工业物联网(IIoT)的兴起和工业4.0的提出,越来越多的设计师.工程师和最终用户关注时间敏感网络(Time-Sensitive Networking,下简称为TSN).TSN为以太网提供确 ...
- .Net Core服务诊断排查
前言: 近期在项目中出现了几次服务内存资源占用较高的情况,特回顾梳理下排查过程以及对相应问题的排查方法总结. 一.Dump抓取 抓取dump的方式有多种,下面介绍几种常用的: 1. 任务管理器中找到程 ...