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:<div id="app">{{ message }}</div>
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 以及更低版本浏览器的原因。

<!DOCTYPE html>
<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这样的代码不是表达式。

<!DOCTYPE html>
<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 进行切换。

<!DOCTYPE html>
<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: "<h1>我是新来的，请多关照！！！</h1><input type='text'>",
			flag: true
		}
	})
</script>
</html>

1-4. 循环指令

我们用v-for 指令根据一组数组的选项列表进行渲染。

v-for 指令需要以item in items 形式的特殊语法，items 是源数据数组并且item 是数组元素迭代的别名。

例如：

<ul id=“app">
	<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>

输出结果为：

<!DOCTYPE html>
<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: "<h1>我是新来的，请多关照！！！</h1><input type='text'>",
			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

事件修饰符
键值修饰符

<!DOCTYPE html>
<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 上过滤输入。

<!DOCTYPE html>
<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 会自动侦测并添加相应的前缀。

样式绑定

<!DOCTYPE html>
<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对象中声明过滤器，返回值作为过滤器的运算结果。

过滤器允许串联使用

【笔记整理】VUE基础入门+例子实践

VUE基础

1-1. VUE2.0介绍

1-2. VUE基本使用,模板语法

1-3. VUE条件分支指令

1-4. 循环指令

1-5. 事件处理

1-6. 表单输入绑定

1-7. 样式表处理

1-8. 计算属性(略)

1-9. 过滤器

公司刚入职了一名 Java 中级开发，短短 4 行代码居然凑齐了 3 个 bug！我哭了~~

公众号5月C#/.NET热文一览

git 下载大陆镜像地址

前端簡歷前端面試技巧

路由以及什麼是動態路由

粗略瞭解下Promise咯

【CSS小Demo】僞元素做京東背景

箭頭函數和 this指向

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結