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或styleclass
<!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 是目前最火的一个前 ...
随机推荐
- 基于tkinter的GUI编程
tkinter:tkinter是绑定了Python的TKGUI工具集,就是Python包装的Tcl代码,通过内嵌在Python解释器内部的Tcl解释器实现的,它是Python标准库的一部分,所以使用它 ...
- java----SVN
下载SVN server 安装服务器,注意需要配置端口和本地仓库 https://www.visualsvn.com/server/download/ 下载SVN client https://tor ...
- 使用npm命令，而不用cnpm命令，也可以得到同样的体验
以前大家都知道使用cnpm命令来替代npm,可以大大提升下载各种包的速度.例如: npm install -g cnpm --registry=https://registry.npm.taobao. ...
- python实现JWT
python实现JWT 一.常见的几种实现认证的方法 1.1basic auth 1.2cookie 1.3token json web token--一种基于token的json格式web认证方法. ...
- nginx反向代理+tomcat域名绑定
今天在用nginx做反向代理时,由于一个tomcat下有多个应用,因此要在tomcat做域名绑定.tomcat启动后,通过域名+端口是可以访问到页面的,但是通过nginx转发后就不能访问了,因此tom ...
- 浅谈Java语言中ArrayList和HashSet的区别
Java语言中ArrayList和HashSet的区别 2019-04-10 13:22:49 一.基本区别 首先一起看个实例,其代码如下: package com.MrZ_baby.com; i ...
- Docker入门到实践
1.什么是Docke 1.网上有很多 2.为什么要使用Docker? 优点 更高效的利用系统资源 更快速的启动时间 一致的运行环境 持续交付和部署 更轻松的迁移 更轻松的维护和扩展 3.Docker的 ...
- python基础day2
一.python字符串 字符串是 Python 中最常用的数据类型.可以使用引号('或")来创建字符串 1.1Python访问字符串中的值 Python不支持单字符类型,单字符在 Pytho ...
- WPF使用总结
ListboxItemContainer样式 一般items控件的项模板 很容易 设置DataTemplate就可以了,比如listbox .但是在选中和失去焦点的时候 却是Windows自带的那种 ...
- Windows下如何将一个文件夹通过Git上传到GitHub上(转)
在通过windows系统的电脑上写代码,需要将项目上传到GitHub上去.比如在Pycharm上写Django后端,整个项目是一个文件夹的形式,那么怎么才能这个文件夹通过Git命令上传到GitHub上 ...