【笔记整理】VUE基础入门+例子实践
VUE基础
1-1. VUE2.0介绍
Vue.js（读音/vjuː/，类似于view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和Vue生态系统支持的库结合使用时，Vue也完全能够为复杂的单页应用程序提供驱动。
Vue的一些语法和AngularJS 的很相似（例如v-if vs ng-if）。
因为AngularJS 是Vue早期开发的灵感来源。然
而，AngularJS 中存在的许多问题，在Vue中已经得到解决。
•复杂性
•灵活性和模块化
•数据绑定
•指令与组件
•性能
React 和Vue有许多相似之处，它们都有：
•使用Virtual DOM（虚拟DOM）
•提供了响应式（Reactive）和组件化（Composable）的视图组件。
•将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。
三步实现hello world
Step1:引入脚本https://unpkg.com/vue
Step2:
Step3:var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}})
- 注意点
Vue不兼容IE8以下。把一个普通JavaScript 对象传给Vue实例的data 选项，Vue将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter。Object.defineProperty是仅ES5 支持，且无法shim 的特性，这也就是为什么Vue不支持IE8 以及更低版本浏览器的原因。
<html>
<head>
<title>title>
<meta charset="utf-8">
<script type="text/javascript" src="js/vue.js">script>
head>
<body>
<div id="app">
{{message}}
div>
body>
<script type="text/javascript">
var v = new Vue({
el: "#app",
data: {
message: "hello world!!! 你好，世界！"
}
})
script>
html>
1-2. VUE基本使用,模板语法
Vue使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。
数据绑定是最常见的”Mustache”语法，即双大括号形式。
使用方式：1. 文本
<div>{{message}}div><div v-once>这个只执行一次：{{message}}div>
使用方式：2. 纯HTML
<div v-html=“htmlMsg”>div>相当于执行了原生的.innerHTML= htmlMsg;
注意：动态渲染html非常危险，容易导致XSS攻击。即跨站脚本攻击。
使用方式：3. 绑定属性
<button v-bind:disabled=“btnFlag”>测试按钮button>
使用方式：4. 使用JavaScript表达式
<div>数学运算：{{x + y}}div>
<div>三目运算：{{ok ? “yes” : “no”}}div>
<div>方法的调用：{{msg.split(‘’).reverse().join()}}div>
注意：if for var这样的代码不是表达式。
<html>
<head>
<title>title>
<meta charset="utf-8">
<script type="text/javascript" src="js/vue.js">script>
head>
<body>
<div id="app">
<div>{{message}}div>
<div v-once>只描绘一次：{{message}}div>
div>
body>
<script type="text/javascript">
var v = new Vue({
el: "#app",
data: {
message: "你好世界!"
}
})
script>
html>
1-3. VUE条件分支指令
指令（Directives）是带有v-前缀的特殊属性。
<p v-if="flag">这是一个神秘的指令p>
<a v-bind:href="url">链接a>
<a v-on:click="doSomething">测试a>
v-if=“表达式”
控制节点的渲染或移除
v-if与v-show的区别：
v-if 是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS 进行切换。
<html>
<head>
<title>title>
<meta charset="utf-8">
<script type="text/javascript" src="js/vue.js">script>
head>
<body>
<div id="app">
<div>{{message}}div>
<div v-once>只描绘一次：{{message}}div>
<hr>
<div>{{htmlMsg}}div>
<div v-html="htmlMsg">div>
<hr>
<button v-bind:disabled="flag">按钮button>
div>
body>
<script type="text/javascript">
var v = new Vue({
el: "#app",
data: {
message: "你好世界!",
htmlMsg: "我是新来的，请多关照！！！
",
flag: true
}
})
script>
html>
1-4. 循环指令
我们用v-for 指令根据一组数组的选项列表进行渲染。
v-for 指令需要以item in items 形式的特殊语法，items 是源数据数组并且item 是数组元素迭代的别名。
例如：
<li v-for="item in items">
{{ item.message}}
li>
ul>
v-for 还支持一个可选的第二个参数为当前项的索引。
<ul id="example-2">
<li v-for="(item, index) in items">序号：
{{ index }} 内容：{{ item.message}}
li>
ul>
也可以用of 替代in 作为分隔符，因为它是最接近JavaScript 迭代器的语法：
<div v-for="item of items">{{item}}div>
可以作为循环对象的，除了数组以外也可以是对象。
也可以提供第二个的参数为键名
第三个参数为索引
整数迭代：
<div>
<span v-for="n in 10">{{ n }} span>
div>
输出结果为：
<html>
<head>
<title>title>
<meta charset="utf-8">
<script type="text/javascript" src="js/vue.js">script>
head>
<body>
<div id="app">
<div>{{message}}div>
<div v-once>只描绘一次：{{message}}div>
<hr>
<div>{{htmlMsg}}div>
<div v-html="htmlMsg">div>
<hr>
<button v-bind:disabled="flag">按钮button>
<hr>
<p>加法的结果是：{{x + y}}p>
<p>{{ isMan ? "男生" : "女生"}}p>
<p> {{strText.split('').reverse().join('')}}p>
div>
body>
<script type="text/javascript">
var v = new Vue({
el: "#app",
data: {
message: "你好世界!",
htmlMsg: "我是新来的，请多关照！！！
",
flag: true,
x: 12,
y: 13,
isMan: true,
strText: "abcdefg"
}
})
script>
html>
1-5. 事件处理
使用v-on:事件名来监听事件。例如v-on:click监听点击事件。
v-on简写@例如：v-on:click 写为 @click
- 事件修饰符
- 键值修饰符
<html>
<head>
<title>title>
<meta charset="utf-8">
<script type="text/javascript" src="js/vue.js">script>
head>
<body>
<div id="app">
<p v-if="flag">这是一个测试v-if指令的节点p>
<p v-if="level === 1">这是管理员p>
<p v-else-if="level === 2">这是普通用户p>
<p v-else>对不起您没有权限p>
<hr>
<p v-show="level === 1">这是管理员p>
div>
body>
<script type="text/javascript">
var v = new Vue({
el: "#app",
data: {
flag: false,
level: 1
}
})
script>
html>
1-6. 表单输入绑定
v-model 指令在表单控件元素上创建双向数据绑定。
它会根据控件类型自动选取正确的方法来更新元素。
v-model 会忽略所有表单元素的value、checked、selected 特性的初始值。
因为它会选择Vue实例数据来作为具体的值。
你应该通过JavaScript 在组件的data 选项中声明初始值。
修饰符
- .lazy在默认情况下，v-model 在input 事件中同步输入框的值与，但可以添加一个修饰符lazy ，从而转变为在change 事件中同步。
- .number如果想自动将用户的输入值转为Number 类型（如果原值的转换结果为NaN则返回原值），可以添加一个修饰符number 给v-model 来处理输入值。
- .trim如果要自动过滤用户输入的首尾空格，可以添加trim 修饰符到v-model 上过滤输入。
<html>
<head>
<title>title>
<meta charset="utf-8">
<script type="text/javascript" src="js/vue.js">script>
head>
<body>
<div id="app">
<input type="text" v-model="text1" />
<br>
{{text1}}
<hr>
<textarea v-model="longText">textarea>
<br>
<p style="white-space: pre-line;">
{{longText}}
p>
<hr>
<input type="checkbox" value="goodmorning" v-model="chk">
<br>
{{chk}}
<div v-if="chk">
要显示的大段内容
div>
<hr>
<label><input type="radio" v-model="hobit" value="旅游">旅游label>
<label><input type="radio" v-model="hobit" value="逛吃">逛吃label>
<label><input type="radio" v-model="hobit" value="看电影">看电影label>
<br>
{{hobit}}
<hr>
<h2>修饰符h2>
<input type="text" v-model.lazy="lazyvalue">
<br>
{{lazyvalue}}
<hr>
<input type="text" v-model.number="x">
+
<input type="text" v-model.number="y">
= {{x + y}}
<hr>
<input type="text" v-model.trim="tValue">
<p style="white-space: pre-line;">{{tValue}}p>
div>
body>
<script type="text/javascript">
var v = new Vue({
el: "#app",
data: {
text1: "hello world",
longText: "这是一段很长的文字",
chk: false,
hobit: "",
lazyvalue: "init",
x: 0,
y: 0,
tValue: " 123"
}
})
script>
html>
1-7. 样式表处理
class的绑定
语法一：v-bind:class=“{ class名: 条件}"
例如：
<div v-bind:class="{ active: isActive}"></div>
语法二：v-bind:class=“对象"
例如：
语法三：
v-bind:class=“[变量1, 变量2, 变量3...]"
例如：
内联样式的绑定
语法一：v-bind:style=“对象名”
例如：
语法二：v-bind:style=“[样式对象1, 样式对象2]”
例如：
当v-bind:style使用需要特定前缀的CSS 属性时，如transform，Vue.js 会自动侦测并添加相应的前缀。
样式绑定
<html>
<head>
<title>title>
<meta charset="utf-8">
<script type="text/javascript" src="js/vue.js">script>
<style type="text/css">
.redC {
height: 100px;
width: 200px;
background: red;
transition-duration: 1s;
}
.bigger {
width: 300px;
height: 200px;
}
.bluebox {
background: blue;
}
style>
head>
<body>
<div id="app">
<div v-bind:class="{redC: isFlag, bigger: bigFlag}">div>
<hr>
<div v-bind:class="cssObject">div>
<hr>
<div v-bind:class="[cls1, cls2]">div>
<hr>
<div v-bind:style="{height: ht, width: wt, background: bg}">div>
<hr>
<div v-bind:style="[cssObj1, cssObj2]">div>
div>
body>
<script type="text/javascript">
var v = new Vue({
el: "#app",
data: {
isFlag: true,
bigFlag: false,
cssObject: {redC: true, bigger: true},
cls1: "bluebox",
cls2: "bigger",
ht: "20px",
wt: "20px",
bg: "pink",
cssObj1: {
height: "50px",
width: "50px"
},
cssObj2: {
background: "blue",
transform: "rotate(50deg)"
}
}
})
script>
html>
1-8. 计算属性(略)
1-9. 过滤器
Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。
过滤器可以用在两个地方：
- mustache 插值
- v-bind 表达式
在filters对象中声明过滤器，返回值作为过滤器的运算结果。
过滤器允许串联使用
