Vue简单入门
1.VueJS 概述与快速入门
1.1 VueJS介绍
Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑 定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。
官网:https://cn.vuejs.org/
1.2 MVVM模式
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为 抽象化，让我们将视图 UI 和业务逻辑分开 MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM， 也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端 开发更加高效、便捷
1.3 VueJS 快速入门
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue的快速入门</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}} <!-- vue 插值部分-->
</div>
</body>
<script>
//view model
//创建Vue对象
new Vue({
el:"#app",//由vue接管id为app区域
data:{
message:"Hello Vue!!!" //此处不能加分号
}
})
</script>
</html>
1.4 插值表达式
数据绑定常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对 象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。
Vue.js 都提供了完全的 JavaScript 表达式支持。
{{ number + 1 }}
{{ ok ? ‘YES’ : ‘NO’ }}
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个 表达式，所以下面的例子都不会生效
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
2.VueJS 常用系统指令
1.v-on 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码
2. v-text与v-html
3. v-bind :插值语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind指令
<!-- v-bind完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
4.v-model 双向绑定（类似AngularJs）
5. v-for(循环遍历)
6. v-if与v-show
v-if是根据表达式的值来决定是否渲染元素
v-show是根据表达式的值来切换元素的display css属性
以下都是些案例（注意看html中的标题）：
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>v-on:click 点击事件</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}}
<button v-on:click="fun1('来了老弟')">点击</button>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",//由vue接管id为app区域
data:{
message:"Hello 222" //此处不能加分号
},
methods: {
fun1: function (msg) {
this.message = msg;
}
}
})
</script>
</html>
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>v-on:keydown阻止其默认行为</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<!--获取用户输入值 触发的事件-->
<h3>这是Vue框</h3>
<input type="text" v-on:keydown="fun1($event)">
<h3>这是传统框</h3>
<input type="text" onkeydown="fun2()">
</div>
</body>
<script>
//view model
new Vue({
el:"#app",//由vue接管id为app区域
methods: {
fun1: function (event) {
if(event.keyCode<48||event.keyCode>105||(event.keyCode>57&&event.keyCode<96)){
//阻止默认行为
event.preventDefault();
}
}
}
});
//传统的JS
function showKeyCode(){
var code = event.keyCode;
alert(code);
}
function fun2($event){
if(event.keyCode<48||event.keyCode>105||(event.keyCode>57&&event.keyCode<96)){
//阻止默认行为
event.preventDefault();
}
}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:mouseover阻止事件传播</title>
<style>
#div {
background-color: red;
width: 300px;
height: 300px;
}
#div2 {
background-color: red;
width: 300px;
height: 300px;
}
</style>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<h3>这是Vue测试</h3>
<div id="app">
<div @mouseover="fun1()" id="div">
<textarea @mouseover="fun2($event)">这是一个文件域</textarea>
</div>
</div>
<h3>这是传统js测试</h3>
<div id="app2">
<div onmouseover="fun3()" id="div2">
<textarea onmouseover="fun4()">这是一个文件域</textarea>
</div>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",//由vue接管id为app区域
methods: {
fun1: function () {
alert("这是div区域")
},
fun2: function ($event) {
alert("这是文本区域")
event.stopPropagation();//阻止冒泡
}
}
});
//传统JS
function fun3() {
alert("这是div区域")
}
function fun4($event) {
alert("这是文本区域")
event.stopPropagation();//阻止冒泡
}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:事件修饰符</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<form @submit.prevent action="http://www.baidu.cn" method="get">
<input type="submit" value="提交"/>
</form>
<div @click="fun1()">
<a @click.stop href="http://www.baidu.cn">百度</a>
<!--触发事件后就不会再触发fun1了 因为+l stop-->
</div>
</div>
</body>
<script>
new Vue({
el:'#app',//表示当前vue对象接管了div区域
methods:{
fun1:function(){
alert("hello baidu");
}
}
});
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:按键修饰符</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<!--
KeyDown：用户摁下摁键时发生
KeyPress：用户摁下摁键，并且产生一个字符时发生
KeyUp： 用户释放某一个摁键时触发
-->
<body>
<div id="app">
<input type="text" @keyUp.enter="fun"/>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods:{
fun:function(){
alert("你按了回车");
}
}
});
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-model</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
姓名:<input type="text" id="username" v-model="user.username"><br>
密码:<input type="password" id="password" v-model="user.password"><br>
<input type="button" value="获取">
<hr>
<input type="button" @click="fun1()" value="测试双向绑定" />
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
user:{
username:"xiaodong",
password:"123456"
}
},
methods:{
fun1:function () {
this.user.username="zhangsan";
}
}
});
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍历</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="v in arr">{{v}}</li>
</ul>
<hr>
<ul>
<li v-for="(value,key) in user">{{value}}={{key}}</li>
</ul>
<hr>
<ul>
<li v-for="(value,key) in grade">{{value}}={{key}}</li>
</ul>
<hr>
<ul v-for="(value,key) in grade">
<li v-for="(value2,key2) in value">{{value2}}={{key2}}</li>
</ul>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5], //数组
user:{//对象
id:1,
name:"张三",
age:18
},
grade:{//班里的学生
student1:{
id:1,
name:"张三",
age:18
},
student2:{
id:2,
name:"张四",
age:19
}
}
},
methods :{
}
});
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-if与v-show</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<!-- v-if是根据表达式的值来决定是否渲染元素
v-show是根据表达式的值来切换元素的display css属性
-->
<div id="app">
<input type="button" v-if="boolen" value="张三出来了"><br>
<input type="button" v-show="boolen" value="张四出来了"><br>
<input type="button" @click="fun()" value="改成状态">
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
boolen:false
},
methods :{
fun: function () {
return this.boolen=!this.boolen
}
}
});
</script>
</html>