Vue(day1)

一、起步

<!-- 开发环境版本，包含了有帮助的命令行警告 -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

开始从下面的几个Vue的使用场景中熟悉Vue：

声明式渲染

<!DOCTYPE html>

<html>

<head>

	<title>Vue</title>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

	<div id="app">

		{{ message }}

	</div>

</body>

<script type="text/javascript">

	var app = new Vue({

		el: '#app',

		data: {

			message: 'Hello Vue!'

		}

	});

</script>

</html>

看起来就像是简单的模板渲染，但其实Vue已经做了大量工作，这个时候的数据和DOM已经是“响应式”

的了。可以打开浏览器控制台修改app实例，如app.message = 'Hello World!'，然后你可以发现html页面也会随之变化。

条件与循环

使用Vue的指令v-if来决定是否创建该元素。

<div id="app">

	<p v-if="seen">现在你能看到我</p>

</div>

var app = new Vue({

	el: '#app',

	data: {

		seen: true

	}

});

使用v-for指令来实现循环：

<div id="app">

	<ul>

		<li v-for="list in lists">

			{{ list.text }}

		</li>

	</ul>

</div>

var app = new Vue({

	el: '#app',

	data: {

		lists:[

			{text: '学习js'},

			{text: '学习vue'},

			{text: '学习...'}

		]

	}

});

处理用户输入

使用v-on指令为元素绑定指定事件：

<div id="app">

	<p> {{message}} </p>

	<button v-on:click="reverseMessage">翻转字符串</button>

</div>

var app = new Vue({

	el: '#app',

	data: {

		message: '双向绑定'

	},

	methods: {

		reverseMessage: function(){

			this.message = this.message.split('').reverse().join('');

		}

	}

});

使用v-model表单输入和应用状态之间的双向绑定：

<div id="app">

	<p> {{message}} </p>

	<input type="text" v-model="message">

</div>

var app = new Vue({

	el: '#app',

	data: {

		message: '双向绑定'

	}

});

组件化应用的构建

具体请参考：组件化应用的构建

二、指令大全

Vue.js提供了一些指令来方便我们操作页面，而不用我们再去操作Dom，具体详情可移步官网：指令

v-text

更新元素的textContent。如果要更新部分的textContent，需要使用 {{ Mustache }} 插值。

v-html

更新元素的innerHtml。注意内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。

v-show

根据表达式的真假切换元素的display:none。

v-if

根据表达式的真假决定是否创建（渲染）元素。

注意：当和 v-for 一起使用时，v-for 的优先级比 v-if 更高。

v-else & v-else-if

结合v-if使用。

v-for

使用特定语法alias in expression，多次渲染元素或模块。

可使用的表达式：Array | Object | number | string

v-model

限制
- 表单控件：input | texteara | selecte
- 组件
修饰符
- .lazy：取代input监听change事件。
- .number：将输入的字符串转化为数字。
- .trim：将输入的字符串过滤掉首位空格。
作用

在表单控件或组件上创建双向绑定。

v-cloak

无表达式，v-cloak指令保持到元素结束编译，与css规则如：[cloak]:{display: none;}一起使用，使元素在编译完成前保持“影藏”状态。这样做的目的是，元素编译结束后再显示出来，可以解决页面编译渲染时出现的闪烁情况。

v-pre

无表达式，使用v-pre可跳过元素及其子元素的编译过程，加快渲染速度。

v-once

无表达式，使用v-once指令后元素只会编译渲染一次。这样可以在某些场景下提升性能。

v-bind

作用

为元素动态地绑定一个或多个特性（attributes + properties）；或绑定一个组件的prop到表达式中。
缩写：:
修饰符
- .prop：被用来绑定DOM的property。（与attribute是有区别的）
- .camel：(2.1.0+) 将 kebab-case 特性名转换为 camelCase。
- .sync： (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。
特殊

在绑定class或style属性时支持数组或对象等特殊类型。

v-on

作用

为元素绑定事件监听。
缩写：@
期望

Function | Inline Statement | Object
修饰符
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .capture - 添加事件侦听器时使用 capture 模式。
- .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
- .left - (2.2.0) 只当点击鼠标左键时触发。
- .right - (2.2.0) 只当点击鼠标右键时触发。
- .middle - (2.2.0) 只当点击鼠标中键时触发。
- .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

三、练习

我们可以通过一些实际的例子来熟悉一下Vue指令的相关用法。

文字跑马灯

需求：让文字滚动起来。
分析：要让文字达到滚动效果，就是随时间变化将字符串的末尾字符移动到头部，或是反过来。总结起来就是每隔一段时间操作一次字符串。另外需要一个按钮来控制文字的滚动效果。

实现：

<div id="app">

	<p>{{ message }} </p>

	<button @click="changeMessage"> {{ btn }} </button>

</div>

var app = new Vue({

	el: '#app',

	data: {

		message: '0123456789',

		btn: '开始',

		status: true,

		intervalId: undefined

	},

	methods: {

		changeMessage: function(){

			var THIS = this;

			THIS.status = !THIS.status;

			if(!THIS.intervalId){

				THIS.intervalId = window.setInterval(function(){

					THIS.message = THIS.message.toString();//防止纯数字报错

					var len = THIS.message.length;

					THIS.message =  THIS.message.charAt(len-1) + THIS.message.slice(0, len - 1);

				}, 1000);

			}

			if(THIS.status){

				THIS.intervalId = clearInterval(THIS.intervalId);

				THIS.btn = '开始';

			}else{

				THIS.btn = '暂停';

			}

		}

	}

})

利用表单双向绑定实现简单的计算器

<div id="app">

	<input type="text" v-model="x" @input="calculate">

	<select v-model="smybol" @change="calculate">

		<option value="+" selected="true">+</option>

		<option value="-">-</option>

		<option value="*">*</option>

		<option value="/">/</option>

	</select>

	<input type="text" v-model="y" @input="calculate">

	<input type="button" value="=" @click="calculate">

	<input type="text" v-model="value">

</div>

var app = new Vue({

	el: '#app',

	data: {

		x: 0,

		y: 0,

		value: 0,

		smybol: "+"

	},

	methods: {

		calculate: function(){

			var THIS = this;

			var x = window.parseFloat(THIS.x);

			var y = window.parseFloat(THIS.y);

			var S = x + THIS.smybol + y;

			THIS.value = window.parseFloat(eval(S));

		}

	}

})

使用v-bind动态修改元素class或style

class

<!DOCTYPE html>

<html>

<head>

	<title>Vue1</title>

	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

	<style type="text/css">

        .red{

            color: #abc;

        }

        .italic{

            font-style: italic;

        }

        .larg{

            font-size: 30px;

        }

    </style>

</head>

<body>

	<div id="app">

		<p>规则，就是用来打破的</p>

		<!--原生class写法-->

		<p class="red italic larg">规则，就是用来打破的</p>

		<!--v-bind场景一:使用数组-->

		<p :class="['red','italic','larg']">规则，就是用来打破的</p>

		<!--场景二：使用三元表达式-->

		<p :class="['red','italic',flag?'larg':'']">规则，就是用来打破的</p>

		<!--场景三：使用数组对象-->

		<p :class="['red','italic',{larg:flag}]">规则，就是用来打破的</p>

		<!--场景四：直接使用对象-->

		<p :class="{red:false, italic:true, larg:true}">规则，就是用来打破的</p>

		<!--动态绑定-->

		<p :class="app_class">规则，就是用来打破的</p>

	</div>

</body>

<script type="text/javascript">

	var app = new Vue({

		el: "#app",

		data: {

			flag: false,

			app_class: {red:true, italic:true, larg:true}

		}

	});

</script>

</html>

style

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Test</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

</head>

<body>

    <div id="app">

        <!--原生写法-->

        <h1 style="color: #abc;font-size: 30px;font-style: italic;">Jinx的含义就是Jinx.</h1>

        <!--使用对象-->

        <h1 :style="{color:'#217352','font-style':'30px','font-style':'italic'}">Jinx的含义就是Jinx.</h1>

        <!--使用数组-->

        <h1 :style="[{color:'#FF9800','font-style':'30px'},{'font-style':'italic'}]">Jinx的含义就是Jinx.</h1>

        <!--动态绑定-->

        <h1 :style="[sty1, sty2]">Jinx的含义就是Jinx.</h1>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el: "#app",

            data: {

                flag: false,

                sty1: {color:'#aa9800','font-style':'30px'},

                sty2: {'font-style':'italic'}

            }

        });

    </script>

</body>

</html>

Vue(day1)的更多相关文章

HTML基础四-VUE
一.VUE VUE官网:https://cn.vuejs.org/v2/guide/ 1.1 Vue简介 VUE与JS的区别 VUE在JS的基础上进行了优化增加VUE最强大的特点,对数据操作特别的友 ...
vue知识day1
HTML语义.CSS:样式 js:行为 jQuery:简化了js操作 boostrap :框架 ,以类方式展现 react:facebook 公司的产品 angular:谷歌公司产品 vue:作者尤雨 ...
Vue.js - Day1
什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于We ...
Vue学习笔记Day1
1.vue初时 vue安装三种方式: 1:CDN引入以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地. Staticfile CDN(国内) : https:// ...
从无到有构建vue实战项目（八）
十六.vue-lazyload的使用首先,我们需要下载vue-lazyload包: npm i vue-lazyload -S 下载好之后,我们将它引入到自己的项目: //main.js //引入图 ...
05 vue项目01-组件关系、bootstrap
1.django后端项目 1.项目预期配置前端静态资源页面展示 2.django项目代码主url from django.contrib import admin from ...
前端入门——day1（简介及推荐书籍和网站）
写给谁这篇文章写给想要入门前端或者刚入门前端的小白~如果是已经工作好几年的小伙伴们可以直接跳过这一系列文章啦. 为啥写这篇文章终于决定给自己挖这个坑了,之前一直没打算写这样的系列文章.回想起自己的 ...
Vue简介-MVVM是什么？
Vue.js - Day1 课程介绍前5天: 都在学习Vue基本的语法和概念:打包工具 Webpack , Gulp 后5天: 以项目驱动教学: 什么是Vue.js Vue.js 是目前最火的一个前 ...
Vue入门到精通
Vue.js - Day1 课程介绍前5天: 都在学习Vue基本的语法和概念:打包工具 Webpack , Gulp 后5天: 以项目驱动教学: 什么是Vue.js Vue.js 是目前最火的一个前 ...

随机推荐

论文阅读笔记五十一：CenterNet: Keypoint Triplets for Object Detection(CVPR2019)
论文链接:https://arxiv.org/abs/1904.08189 github:https://github.com/Duankaiwen/CenterNet 摘要目标检测中,基于关键点的 ...
Eclipse使用技巧 - 2. Eclipse自动补全功能轻松设置
本文介绍如何设置Eclipse代码自动补全功能.轻松实现输入任意字母均可出现代码补全提示框. Eclipse代码自动补全功能默认只包括点”.” ,即只有输入”.”后才出现自动补全的提示框.想要自动补 ...
AWS S3服务使用
AWS S3是亚马逊的一种文件存储服务使用方便. 一.配置服务 public static class AWS_S3ClientInfo { private static readonly strin ...
docker 安装使用 mssql2017
1.拉取镜像官方文档参考 : https://docs.microsoft.com/zh-cn/sql/linux/quickstart-install-connect-docker?view=sq ...
如何在本地数据中心安装Service Fabric for Windows集群
概述首先本文只是对官方文档(中文,英文)的一个提炼,详细的安装说明还请仔细阅读官方文档. 虽然Service Fabric的官方名称往往被加上Azure,但是实际上(估计很多人不知道)Service ...
在SOUI中使用布局模板
概要注意:布局模板是SOUI 2.8.0.4 新增加的功能.之前版本不支持. SOUI的listview等一系统控件支持通过模板来创建列表项,这里要说的模板不是指listview中的使用的列表项模板 ...
浅谈Java语言中try{}catch{}和finally{}的执行顺序问题
浅谈Java语言中try{}catch{}和finally{}的执行顺序问题 2019-04-06 PM 13:41:46 1. 不管有没有出现异常,finally块中代码都会执行: 2. 当t ...
OI退役
OI退役 by war 其实初中时就想自学编程,但是这个愿望并没有很强烈,加上中考的压力就没有实践.在中考前夕看到的现在的机房,哇,计算机奥赛.但是在机房里的可能是一神和奥神,也许有凯哥. 高一寒假学 ...
【redis】在dotnet core下的redis的使用
1.Install-Package Microsoft.Extensions.Caching.Redis -Version 2.2.0 2.注入 services.AddDistributedRedi ...
SSL/TLS抓包出现提示Ignored Unknown Record
SSL/TLS抓包出现提示Ignored Unknown Record 出现这种提示有两种情况.第一种,抓包迟了,部分SSL/TLS的协商数据没有获取,Wireshark无法识别和解析.第二种,数据包 ...