一、起步

  1. <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  2. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  1. <!-- 生产环境版本，优化了尺寸和速度 -->
  2. <script src="https://cdn.jsdelivr.net/npm/vue"></script>

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

  • 声明式渲染
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title>Vue</title>
  5. 	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  6. </head>
  7. <body>
  8. 	<div id="app">
  9. 		{{ message }}
  10. 	</div>
  11. </body>
  12. <script type="text/javascript">
  13. 	var app = new Vue({
  14. 		el: '#app',
  15. 		data: {
  16. 			message: 'Hello Vue!'
  17. 		}
  18. 	});
  19. </script>
  20. </html>

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

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

  • 条件与循环

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

    1. <div id="app">
    2. 	<p v-if="seen">现在你能看到我</p>
    3. </div>
    1. var app = new Vue({
    2. 	el: '#app',
    3. 	data: {
    4. 		seen: true
    5. 	}
    6. });

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

    1. <div id="app">
    2. 	<ul>
    3. 		<li v-for="list in lists">
    4. 			{{ list.text }}
    5. 		</li>
    6. 	</ul>
    7. </div>
    1. var app = new Vue({
    2. 	el: '#app',
    3. 	data: {
    4. 		lists:[
    5. 			{text: '学习js'},
    6. 			{text: '学习vue'},
    7. 			{text: '学习...'}
    8. 		]
    9. 	}
    10. });

  • 处理用户输入

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

    1. <div id="app">
    2. 	<p> {{message}} </p>
    3. 	<button v-on:click="reverseMessage">翻转字符串</button>
    4. </div>
    1. var app = new Vue({
    2. 	el: '#app',
    3. 	data: {
    4. 		message: '双向绑定'
    5. 	},
    6. 	methods: {
    7. 		reverseMessage: function(){
    8. 			this.message = this.message.split('').reverse().join('');
    9. 		}
    10. 	}
    11. });

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

    1. <div id="app">
    2. 	<p> {{message}} </p>
    3. 	<input type="text" v-model="message">
    4. </div>
    1. var app = new Vue({
    2. 	el: '#app',
    3. 	data: {
    4. 		message: '双向绑定'
    5. 	}
    6. });

  • 组件化应用的构建

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

二、指令大全

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指令的相关用法。

文字跑马灯

  • 需求：让文字滚动起来。

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

  • 实现：

    1. <div id="app">
    2. 	<p>{{ message }} </p>
    3. 	<button @click="changeMessage"> {{ btn }} </button>
    4. </div>
    1. var app = new Vue({
    2. 	el: '#app',
    3. 	data: {
    4. 		message: '0123456789',
    5. 		btn: '开始',
    6. 		status: true,
    7. 		intervalId: undefined
    8. 	},
    9. 	methods: {
    10. 		changeMessage: function(){
    11. 			var THIS = this;
    12. 			THIS.status = !THIS.status;
    13. 			if(!THIS.intervalId){
    14. 				THIS.intervalId = window.setInterval(function(){
    15. 					THIS.message = THIS.message.toString();//防止纯数字报错
    16. 					var len = THIS.message.length;
    17. 					THIS.message =  THIS.message.charAt(len-1) + THIS.message.slice(0, len - 1);
    18. 				}, 1000);
    19. 			}
    21. 			if(THIS.status){
    22. 				THIS.intervalId = clearInterval(THIS.intervalId);
    23. 				THIS.btn = '开始';
    24. 			}else{
    25. 				THIS.btn = '暂停';
    26. 			}
    27. 		}
    28. 	}
    29. })

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

    1. <div id="app">
    2. 	<input type="text" v-model="x" @input="calculate">
    3. 	<select v-model="smybol" @change="calculate">
    4. 		<option value="+" selected="true">+</option>
    5. 		<option value="-">-</option>
    6. 		<option value="*">*</option>
    7. 		<option value="/">/</option>
    8. 	</select>
    9. 	<input type="text" v-model="y" @input="calculate">
    10. 	<input type="button" value="=" @click="calculate">
    11. 	<input type="text" v-model="value">
    12. </div>
    1. var app = new Vue({
    2. 	el: '#app',
    3. 	data: {
    4. 		x: 0,
    5. 		y: 0,
    6. 		value: 0,
    7. 		smybol: "+"
    8. 	},
    9. 	methods: {
    10. 		calculate: function(){
    11. 			var THIS = this;
    12. 			var x = window.parseFloat(THIS.x);
    13. 			var y = window.parseFloat(THIS.y);
    14. 			var S = x + THIS.smybol + y;
    15. 			THIS.value = window.parseFloat(eval(S));
    16. 		}
    17. 	}
    18. })

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

    • class

      1. <!DOCTYPE html>
      2. <html>
      3. <head>
      4. 	<title>Vue1</title>
      5. 	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
      6. 	<style type="text/css">
      7.         .red{
      8.             color: #abc;
      9.         }
      10.         .italic{
      11.             font-style: italic;
      12.         }
      13.         .larg{
      14.             font-size: 30px;
      15.         }
      16.     </style>
      17. </head>
      18. <body>
      19. 	<div id="app">
      20. 		<p>规则，就是用来打破的</p>
      21. 		<!--原生class写法-->
      22. 		<p class="red italic larg">规则，就是用来打破的</p>
      23. 		<!--v-bind场景一:使用数组-->
      24. 		<p :class="['red','italic','larg']">规则，就是用来打破的</p>
      25. 		<!--场景二：使用三元表达式-->
      26. 		<p :class="['red','italic',flag?'larg':'']">规则，就是用来打破的</p>
      27. 		<!--场景三：使用数组对象-->
      28. 		<p :class="['red','italic',{larg:flag}]">规则，就是用来打破的</p>
      29. 		<!--场景四：直接使用对象-->
      30. 		<p :class="{red:false, italic:true, larg:true}">规则，就是用来打破的</p>
      31. 		<!--动态绑定-->
      32. 		<p :class="app_class">规则，就是用来打破的</p>
      33. 	</div>
      34. </body>
      35. <script type="text/javascript">
      36. 	var app = new Vue({
      37. 		el: "#app",
      38. 		data: {
      39. 			flag: false,
      40. 			app_class: {red:true, italic:true, larg:true}
      41. 		}
      42. 	});
      43. </script>
      44. </html>

    • style

      1. <!DOCTYPE html>
      2. <html>
      3. <head>
      4.     <meta charset="utf-8">
      5.     <title>Test</title>
      6.     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
      7. </head>
      8. <body>
      9.     <div id="app">
      10.         <!--原生写法-->
      11.         <h1 style="color: #abc;font-size: 30px;font-style: italic;">Jinx的含义就是Jinx.</h1>
      12.         <!--使用对象-->
      13.         <h1 :style="{color:'#217352','font-style':'30px','font-style':'italic'}">Jinx的含义就是Jinx.</h1>
      14.         <!--使用数组-->
      15.         <h1 :style="[{color:'#FF9800','font-style':'30px'},{'font-style':'italic'}]">Jinx的含义就是Jinx.</h1>
      16.         <!--动态绑定-->
      17.         <h1 :style="[sty1, sty2]">Jinx的含义就是Jinx.</h1>
      18.     </div>
      20.     <script type="text/javascript">
      21.         var vm = new Vue({
      22.             el: "#app",
      23.             data: {
      24.                 flag: false,
      25.                 sty1: {color:'#aa9800','font-style':'30px'},
      26.                 sty2: {'font-style':'italic'}
      28.             }
      29.         });
      30.     </script>
      31. </body>
      32. </html>

Vue(day1)的更多相关文章

  1. HTML基础四-VUE

    一.VUE VUE官网:https://cn.vuejs.org/v2/guide/ 1.1 Vue简介 VUE与JS的区别 VUE在JS的基础上进行了优化 增加VUE最强大的特点,对数据操作特别的友 ...

  2. vue知识day1

    HTML语义.CSS:样式 js:行为 jQuery:简化了js操作 boostrap :框架 ,以类方式展现 react:facebook 公司的产品 angular:谷歌公司产品 vue:作者尤雨 ...

  3. Vue.js - Day1

    什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于We ...

  4. Vue学习笔记Day1

    1.vue初时 vue安装三种方式: 1:CDN引入 以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地. Staticfile CDN(国内) : https:// ...

  5. 从无到有构建vue实战项目（八）

    十六.vue-lazyload的使用 首先,我们需要下载vue-lazyload包: npm i vue-lazyload -S 下载好之后,我们将它引入到自己的项目: //main.js //引入图 ...

  6. 05 vue项目01-组件关系、bootstrap

    1.django后端项目 1.项目预期 配置前端静态资源            页面展示 2.django项目代码 主url from django.contrib import admin from ...

  7. 前端入门——day1（简介及推荐书籍和网站）

    写给谁 这篇文章写给想要入门前端或者刚入门前端的小白~如果是已经工作好几年的小伙伴们可以直接跳过这一系列文章啦. 为啥写这篇文章 终于决定给自己挖这个坑了,之前一直没打算写这样的系列文章.回想起自己的 ...

  8. Vue简介-MVVM是什么？

    Vue.js - Day1 课程介绍 前5天: 都在学习Vue基本的语法和概念:打包工具 Webpack , Gulp 后5天: 以项目驱动教学: 什么是Vue.js Vue.js 是目前最火的一个前 ...

  9. Vue入门到精通

    Vue.js - Day1 课程介绍 前5天: 都在学习Vue基本的语法和概念:打包工具 Webpack , Gulp 后5天: 以项目驱动教学: 什么是Vue.js Vue.js 是目前最火的一个前 ...

随机推荐

  1. Restful 接口开发 完整版

    准备: springboot ssm框架 项目结构:注意 Swagger2Config要和springboot的启动类放在同一级 //pom所需的依赖 <dependency> <g ...

  2. 通过GIT_COMMIT进行代码回滚

    首先需要安装插件:conditional-buildstep A buildstep wrapping any number of other buildsteps, controlling thei ...

  3. [原创]X-HDL 4.2安装与使用

    由于涉及到VHDL工程,但实际工作中,用Verilog更多些,因此安装X-HDL进行转换,安装步骤与使用如下: X-HDL进行破解,破解如下: 安装完毕后,打开一个带转换的文件,进行如下操作: 链接: ...

  4. scss/less语法以及在vue项目中的使用(转载)

    1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...

  5. UOJ#346. 【清华集训2017】某位歌姬的故事 动态规划

    原文链接www.cnblogs.com/zhouzhendong/p/UOJ346.html 题解 首先按照 $m_i$ 的大小排个序. 如果某一个区间和一个 m 值比他小的区间有交,那么显然可以将这 ...

  6. 课下必做MyCP

    一.Linux的CP命令 Linux 的cp命令 功能: 复制文件或目录 说明: cp指令用于复制文件或目录,如同时指定两个以上的文件或目录,且最后的目的地是一个已经存在的目录,则它会把前面指定的所有 ...

  7. Spring 1 控制反转、依赖注入

    1.1 Spring的核心是控制反转(IoC)和面向切面(AOP) 学习spring之前的开发中通过new创建一个对象,有了spring之后,spring创建对象实例-IoC控制反转,之后需要实例对象 ...

  8. php 缓存 加速缓存

    PHP四大加速缓存器opcache,apc,xcache,eAccelerator eAccelerator,xcache,opcache,apc(偏数据库缓存,分系统和用户缓存)是PHP缓存扩展, ...

  9. 【C语言编程练习】5.11 猴子吃桃子问题

    1. 问题描述 有一只猴子,第一天摘下若干个桃子,当即吃掉了一半,又多吃了一个,第二天又将剩下的桃子吃掉了一半,又多吃了一个,按照这样的吃法,每天都吃前一天吃下的桃子的一半又一个.到第十天,就剩下了一 ...

  10. python3.5.2库getpass

    getpass的功能是:允许隐式的输入字符串 import getpass _username='vigossr' _password='haha' username=input('username: ...