1.2、Vue的介绍
-
作者：尤雨溪 weex
-
渐近式框架 Vue的设计，借鉴了很多angular的思想
-
版本号： 稳定开发版本 2.6 2019年10月 Vue3.0 公布了源码
-
文档地址：https://cn.vuejs.org/
1.3、学习能力
- 文档阅读能力
- 解决问题的能力 （百度，发现问题）
2、Vue知识
- Vue的教程地址： https://cn.vuejs.org/v2/guide/
- MVVM
M 模型 model（数据） V 视图 view （页面）
模型->视图 视图->模型 【双向数据绑定】
Vue就是一个基于MVVM的框架
2.1 安装
npm 安装
npm i vue --save
cdn 引入
cdn 就是将文件放到某个服务器上面， 变成一个远程的资源文件，然后引入项目中
<script stc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
注意：
生产版本： 程序已经开发结束，使用的文件 没有警告和提示信息 文件小
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
开发版本: 程序在开发阶段，使用的文件 有警告和提示信息 文件大
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.2 基础使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!-- 第1步：引入Vue.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 第2步： 书写一个容器标签 -->
<div id="app">
{{ msg }}
{{ 10>20 }}
</div>
</body>
<script>
// 第3步： 实例化
console.log(Vue);
let vm = new Vue({
el:"#app", // el 挂载的节点选择器 将来所有的Vue语法只会在这个节点范围内有效
data:{ // 数据 【核心】
msg:"天王盖地虎",
}
});
console.log(vm);
// 注意： el 不能挂载到body或者html上面
// 学习Vue就是学习 实例化传入的这个配置选项
// new Vue(配置对象)
</script>
</html>
2.3 基础指令
2.3.1、插值表达式
{{ msg }} msg 是data中的变量
{{ 10>20 }} 直接放入js表达式
2.3.2、常用指令
1、渲染文本
- v-html 渲染html标签
- v-text 不渲染html标签，将html作为字符串 ， 插值表达式一个原理
- v-once 一次性绑定
// 指令： Vue定义好的一些标签属性
// <标签 指令名="变量或者表达式"></标签>
// v-html 相当于innerHTML 渲染标签
// v-text 相当于innerText 不渲染标签
// v-once 一次性绑定 <标签 v-once>{{变量}}</标签>
{{ msg }}
<h2>{{msg}}</h2>
<h3 v-html="msg"></h3>
<h3 v-text="msg"></h3>
<h3 v-once>{{nums}}</h3>
2、属性绑定
// 属性绑定！！！
// <标签 v-bind:属性名="变量值"></标签>
// 简写： <标签 :属性名="变量值"></标签>
// <标签 :属性名="'字符串'+变量值"></标签>
<div id="app">
<h3 id="str">hello</h3>
<h3 v-bind:id="str">hello</h3>
<!-- 简写 -->
<h3 :id="str">hello</h3>
<h4 :title="'box-'+nums">和</h4>
<h4 :title=`box-${nums}`>和</h4>
<h3 v-show="100>200">你好</h3>
</div>
<script>
let vm = new Vue({
el:"#app", // el 挂载的节点选择器 将来所有的Vue语法只会在这个节点范围内有效
data:{ // 数据 【核心】
str:"ccc",
nums:100
}
});
</script>
3、if语句
// v-if="条件" v-else-if="条件" v-else
<h3 v-if="!state">对不没有数据</h3>
<ul v-else>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
<h4 v-if="x==200">是200</h4>
<h4 v-else-if="x==300">是300</h4>
<h4 v-else-if="x==400">是400</h4>
<h4 v-else>不是200，300，400</h4>
4、for语句
// 可以直接渲染 数组和对象
// 执行了JSON.stringify();
// v-for="值 in 数组/对象"
// v-for="(值,键) in 数组/对象"
// v-for="(值,键) in 数组/对象"
// v-for="(值,键,下标) in 对象"
// 【注意：】 第1位标识符是值，第2位标识符是下标或者属性名，第3位标识符是序号（仅限对象）
// 【注意：】 要求每个列表项，都要有一个key值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!-- 第1步：引入Vue.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 第2步： 书写一个容器标签 -->
<div id="app">
{{ obj }}
{{ arr }}
<ul>
<li v-for="item in arr" >{{item}}</li>
</ul>
<ul>
<li v-for="val in obj">{{val}}</li>
</ul>
<hr>
<ul>
<li v-for="(item,index) in arr" key="index">{{index}}======{{item}}</li>
</ul>
<ul>
<li v-for="(val,idx) in obj" key="idx">{{idx}}====={{val}}</li>
</ul>
<hr>
<ul>
<li v-for="(item,index,i) in arr">{{i}}==={{index}}======{{item}}</li>
</ul>
<ul>
<li v-for="(val,idx,i) in obj">{{i}}==={{idx}}====={{val}}</li>
</ul>
</div>
</body>
<script>
let vm = new Vue({
el:"#app", // el 挂载的节点选择器 将来所有的Vue语法只会在这个节点范围内有效
data:{ // 数据 【核心】
obj:{
name:"德玛西亚",
age:20
},
arr:["你好","我好","大家好"]
}
});
</script>
</html>
2.4、事件绑定
2.4.1、事件绑定
methods:{
事件函数名(){
....
}
}
<标签 v-on:事件名="事件函数"></标签>
简写： <标签 @事件名="事件函数"></标签>
注意： 事件函数内部的this指向当前Vue实例，而不是当前节点对象
2.4.2、事件传参
methods:{
事件函数名(形参){
....
}
}
<标签 @事件名="事件函数(实参)"></标签>
2.4.3、事件对象
methods:{
事件函数名(ev){
ev就是事件对象
}
}
<标签 @事件名="事件函数"></标签>
同时获取事件对象和传参
methods:{
事件函数名(形参,ev){
....
}
}
<标签 @事件名="事件函数(实参,$event)"></标签>
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!-- 第1步：引入Vue.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 第2步： 书写一个容器标签 -->
<div id="app">
{{str}}
<button v-on:click="say">hello</button>
<button @click="say">hello</button>
<ul>
<!-- <li v-for="(item,index) in arr" :key="index" @click="show(11)">{{item}}</li> -->
<!-- <li v-for="(item,index) in arr" :key="index" @click="show(item)">{{item}}</li> -->
<!-- <li v-for="(item,index) in arr" :key="index" @click="show2">{{item}}</li> -->
<li v-for="(item,index) in arr" :key="index" @click="show3(item,$event)">{{item}}</li>
</ul>
</div>
</body>
<script>
// 第3步： 实例化
let vm = new Vue({
el:"#app", // el 挂载的节点选择器 将来所有的Vue语法只会在这个节点范围内有效
data:{ // 数据 【核心】
arr:[161,222,323,414,525,166,677,878],
str:""
},
methods:{ // 所有的事件绑定函数都放在methods里面
// say:function(){
// }
say(){
alert(123)
},
show(nums){
console.log(nums);
console.log(this); // 当前Vue实例
this.str = nums;
console.log("show");
},
show2(ev){
console.log(ev.target);
console.log("show2");
},
show3(nums,ev){
console.log(nums);
console.log(ev);
console.log(ev.target);
console.log("show3");
}
}
});
</script>
</html>
2.4.4、事件修饰符
-
事件修饰符
// 事件修饰符！！！ // <标签 @事件名.修饰符="事件函数"></标签> // .stop 阻止冒泡 // .prevent 阻止默认事件 // .capture // .self // .once // .passive -
按键修饰符
// 按键修饰符！！！ // <标签 @按键事件名.按键修饰符="事件函数"></标签> // .enter // .tab // .delete (捕获“删除”和“退格”键) // .esc // .space // .up // .down // .left // .right // 注意：事件得是键盘事件 // 配置按键修饰符： Vue.config.keyCodes.修饰符名称 = 按键码 【注意： 写在Vue实例之前】代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!-- 第1步：引入Vue.js文件 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!-- 第2步： 书写一个容器标签 --> <div id="app"> <a href="http://www.baidu.com" @click.prevent="say">百度一下</a> <!-- <input type="text" @blur="login"> --> <input type="text" @keyup.enter="login"> </div> </body> <script> // 第3步： 实例化 Vue.config.keyCodes.f1 = 112 let vm = new Vue({ el:"#app", // el 挂载的节点选择器 将来所有的Vue语法只会在这个节点范围内有效 data:{ // 数据 【核心】 }, methods:{ // say(ev){ // ev.preventDefault(); // alert(123) // } say(){ alert(123) }, login(){ console.log(33333); } } }); </script> </html>
