今日内容
导航：
- 今日内容
- 概述
- VueJS 常用系统指令
- v-on
- 插值表达式
- demo2（单击事件表达式）.html
- demo3(v_on_keydown).html
- demo4(鼠标移动事件和阻止事件的传播).html
- demo5(事件修饰符).html
- demo6(按键修饰符).html
- demo7(v-text与v-html).html
- demo8(v-text与v-html在v-bind上的使用).html
- demo9(v-model绑定).html
- demo10(v-for遍历数组).html
- demo11(v-for遍历对象).html
- demo12（v-for遍历对象集合）.html
- demo13(v-if与v-show).html
- demo14（Vue生命周期）.html
概述
-
VueJs介绍：
- Vue.js是一个构建数据驱动的 web 界面的
渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。
- Vue.js是一个构建数据驱动的 web 界面的
-
MVVM模式：
- MVVM是
Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开 - MVVM模式和MVC模式一样，主要目的是分离视图（View） 和 模型（Model）
- Vue.js 是一个提供了 MVVM 风格的
双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷
- MVVM是
[外链图片转存失败(img-RUinbcw5-1563862240615)(https://i.imgur.com/TglYDAQ.png)]
- 快速入门：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>快速入门</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
data:{
message:'hello world' //注意不要写分号结尾
}
});
</script>
</body>
</html>
-
插值表达式
- 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。Vue.js 都提供了完全的 JavaScript 表达式支持
- Vue.js 都提供了完全的 JavaScript 表达式支持
{{ number + 1 }}
{{ ok ? ‘YES’ : ‘NO’ }} - 这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
{{ var a = 1 }}
{{ if (ok) { return message } }}
VueJS 常用系统指令
v-on
1. 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码
插值表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>快速入门</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<!--插值表达式-->
<body>
<div id="app">
{{message}} <!--Vue的插值表达式，把data中定义的数据显示到此处-->
<!--三元运算符-->
{{false ? "正确" : "错误"}}
<!--数学运算-->
{{number* 3.14}}
<!--插值表达式不支持
{{var a=1}}
{{
if(a=10){}
}}
-->
</div>
</body>
<script>
//view model
//新建对象
new Vue({
el:"#app", //由Vue接管id为app的区域
data:{
message:"Hello Vue!", //注意：此处不要加分号,如果有多个数据就加逗号，最后一个数据不加符号
number:100
}
});
</script>
</html>
demo2（单击事件表达式）.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>快速入门</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<!--插值表达式-->
<body>
<div id="app">
{{message}} <!--Vue的插值表达式，把data中定义的数据显示到此处-->
<!--三元运算符-->
{{false ? "正确" : "错误"}}
<!--数学运算-->
{{number* 3.14}}
<!--插值表达式不支持
{{var a=1}}
{{
if(a=10){}
}}
-->
</div>
</body>
<script>
//view model
//新建对象
new Vue({
el:"#app", //由Vue接管id为app的区域
data:{
message:"Hello Vue!", //注意：此处不要加分号,如果有多个数据就加逗号，最后一个数据不加符号
number:100
}
});
</script>
</html>
demo3(v_on_keydown).html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:keydown</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<!--v-on的键盘事件和阻止事件的默认行为-->
<body>
<div id="app">
Vue:<input type="text" v-on:keydown="fun($event)">
<hr/>
传统JS:<input type="text" onkeydown="showKeyCode()">
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods:{
fun:function (event) {
var keyCode=event.keyCode;
if (keyCode<48 || keyCode >57){
// 不让键盘的按键起作用
event.preventDefault(); //点击后启动默认行为-- 阻止事件
}
}
}
});
//传统JS的键盘按下事件
function showKeyCode() {
// event 对象和我们的document对象以及window对象是一样的，可以不用定义直接使用
var keyCode=event.keyCode;
if (keyCode<48|| keyCode>57){
// 不让键盘的按键起作用
event.preventDefault();
}
// alert(keyCode);
// if(event.keyCode==13){
// alert("你按的是回车")
/);
}
</script>
</html>
demo4(鼠标移动事件和阻止事件的传播).html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:mouseover</title>
<style>
#div {
background-color: red;
width:300px;
height:300px;
}
</style>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<!--鼠标移动事件和阻止事件的传播-->
<body>
<div id="app">
<!--Vue的方式：-->
<div @mouseover="fun1" id="div">
<textarea @mouseover="fun2($event)">这是一个文件域</textarea>
</div>
<!--<div onmouseover="divmouseover()" id="div">
<textarea onmouseover="textareamouseover()" >这是一个文件域</textarea>
</div>-->
</div>
</body>
<script>
//view model
/*
* @事件名称 就是 v-on:事件名称的简写方式
* @mouseover 它就等同于v-on: mouseover
*
* */
new Vue({
el:"#app",
methods:{
fun1:function () {
alert("鼠标悬停在div上了");
},
fun2:function (event) {
alert("鼠标悬停在textarea上了");
event.stopPropagation();
}
}
});
//传统的js方式
function divmouseover() {
alert("鼠标移动到了div上了")
};
function textareamouseover() {
alert("鼠标移动到了textarea上了");
event.stopPropagation();
};
</script>
</html>
demo5(事件修饰符).html
[外链图片转存失败(img-rMSHL7av-1563862240616)(https://i.imgur.com/bc2wdU9.png)]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:事件修饰符</title>
<style>
#div {
background-color: red;
width: 300px;
height: 300px;
}
</style>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<form @submit.prevent action="http://www.baidu.com" method="post">
<input type="submit" value="提交">
</form>
<!--传统提交方式-->
<!-- <form action="http://www.baidu.com" method="post" onsubmit="return checkForm()">
<input type="submit" value="提交">
</form>-->
<hr/>
<div @mouseover="fun1" id="div">
<textarea @mouseover.stop="fun2($event)">这是一个文件域</textarea>
</div>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods:{
fun1:function () {
alert("鼠标悬停在div上了");
},
fun2:function (event) {
alert("鼠标悬停在textarea上了");
}
}
});
//传统js方式
function checkForm() {
alert(1);
//表单验证必须有一个明确的boolean类型返回值
//在应用验证方法时必须加上return 方法名称
return false;
}
</script>
</html>
demo6(按键修饰符).html
[外链图片转存失败(img-hizRXR6z-1563862240616)(https://i.imgur.com/lKvtrZ7.png)]
<!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">
Vue: <input type="text" @keydown.enter="fun1">
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods:{
fun1:function () {
alert("按下的是回车");
}
}
})
</script>
</html>
- v-on 简写方式
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
demo7(v-text与v-html).html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-text与v-html</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<!--Vue-->
<div v-text="message"></div>
<div v-html="message"></div>
<!--
传统方式：
<div id="div1"></div>
<div id="div2"></div>
-->
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
message:"<h1>Hello Vue</h1>"
}
})
//传统的js的innerText和innerHTML
window.onload=function () {
document.getElementById("div1").innerHTML="<h1>Hello</h1>";
document.getElementById("div2").innerText="<h1>Hello</h1>";
}
</script>
</html>
demo8(v-text与v-html在v-bind上的使用).html
* 插值语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-text与v-html在v-bind上的使用</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<font size="5" v-bind:color="ys1">传智播客</font>
<font size="5" v-bind:color="ys2">黑马程序员</font>
</div>
</body>
<script>
//view model
//插值表达式不能用于html标签的属性取值
//要想给html标签的属性设置变量的值，需要使用v-bind
//v-bind也可以简化写法 直接使用：
new Vue({
el:"#app",
data:{
ys1:"red",
ys2:"green"
}
})
</script>
</html>
- 简写方式：
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
demo9(v-model绑定).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>
<div id="app">
<form action="" method="post">
用户名：<input type="text" name="username" v-model="user.username"><br/>
密码： <input type="text" name="password" v-model="user.password"><br/>
</form>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
user:{
username:"test",
password:"1234"
}
}
})
</script>
</html>
demo10(v-for遍历数组).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="(item,index) in arr">数据：{{item}}，索引：{{index}}</li>
</ul>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5,6]
}
})
</script>
</html>
demo11(v-for遍历对象).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="(key,value) in student">
{{key}}={{value}}
</li>
</ul>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
student:{
name:"张三",
age:17,
addr:"四川成都"
}
}
})
</script>
</html>
demo12（v-for遍历对象集合）.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">
<table border="1">
<tr>
<td>序号号</td>
<td>编号</td>
<td>名称</td>
<td>价格</td>
</tr>
<!--Vue的遍历对象-->
<tr v-for="(item,index) in students">
<td>{{index}}</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
</tr>
</table>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
students:[
{id:1,name:"张三",price:20},
{id:2,name:"李四",price:20},
{id:3,name:"王五",price:20}
]
}
})
</script>
</html>
demo13(v-if与v-show).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>
<!--
v-if和v-show都是用来控制元素的渲染。
v-if判断是否加载，可以减轻服务器的压力，在需要时加载,但有更高的切换开销;v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
-->
<body>
<div id="app">
<span v-if="flag">传智播客</span>
<span v-show="flag">itcast</span>
<button @click="toggle">切换</button> <!--点击这个触发下面的切换事件-->
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
flag:false
},
methods:{
toggle:function () {
this.flag = !this.flag; //将值进行切换，flag初始为false;点击后取反
}
}
})
</script>
</html>
demo14（Vue生命周期）.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vuejs生命周期</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: 'hello world'
},
beforeCreate: function() {
console.log(this);
showData('创建vue实例前', this);
},
created: function() {
showData('创建vue实例后', this);
},
beforeMount: function() {
showData('挂载到dom前', this);
},
mounted: function() {
showData('挂载到dom后', this);
},
beforeUpdate: function() {
showData('数据变化更新前', this);
},
updated: function() {
showData('数据变化更新后', this);
},
beforeDestroy: function() {
vm.test = "3333";
showData('vue实例销毁前', this);
},
destroyed: function() {
showData('vue实例销毁后', this);
}
});
function realDom() {
console.log('真实dom结构：' + document.getElementById('app').innerHTML);
}
function showData(process, obj) {
console.log(process);
console.log('data 数据：' + obj.message)
console.log('挂载的对象：')
console.log(obj.$el)
realDom();
console.log('------------------')
console.log('------------------')
}
//vm.message = "good...";
vm.$destroy();
</script>
</html>
- 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.
6205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
