Vue
组件化、虚拟化dom、MVVM（特点）
vue的作者：尤雨溪（官网Vue.js）
vue的使用：
vue的特点：
组件是什么？将代码封装成一个组件，每个人都能够使用
虚拟dom ? 就是一个虚拟的空间（空间换时间）
Ajax请求一个数组，数组里面怎样放？for循环一个多个加上去
模型数据是从数据库中查出来反映给前端的数据（通过操作dom节点去拼接显示）
有其他操作如添加，dom又要重新获取模型数据拼接到页面中
而虚拟dom就相当于开辟一个新的缓存空间：模型数据放入到虚拟dom中，前端又从里面拿数据
这样的好处是，当改变数据时已经存在的数据不用反复更新抓取给dom，直接从虚拟dom拿
1.Vue简介
Vue.js : 用于构建用户界面的渐进式JavaScript 框架（官网说明），它就是一个前端MVVM框架
特别：自底向上逐层应用的----把基础先写好，再逐层往上添加功能和效果
jQuery：给页面绑定数据
vue devtools：在浏览器上安装，方便测试调试
2.安装Vue
（1）先安装node.js
（2）在官网下载开发版本的vue.js，引入html中<script src="../js/vue.js"></script>
Vue实例和容器是一一对应的；
真实的开发中只有一个vue实例，并且会配合着组件一起使用
{{xxxx}}中的xxxx要写js表达式，xxxx可以自动读取到data中的所有属性
一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新
第一个vue
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<meta http-equiv="X-UA-Compatible" content="IE=edge">
? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
? ?<title>Document</title>
? ?<script src="../js/vue.js"></script>
</head>
<body>
? ?<div id="app">
? ? ? ?<p>{{message}}</p>
? ?</div>
? ?
? ?<script>
? ? ? ?// 消除console中的错误提示
? ? ? ?Vue.config.productionTip=false;//设置为 false 以阻止 vue 在启动时生成生产提示。 ? ?
? ? ? ? // 一个vue实例只能指定一个容器,一个容器也只能被一个vue实例服务
? ? ? ? new Vue({
? ? ? ? el:"#app", ?//指定该vue服务于哪一个容器
? ? ? ? data:{message:"hello"}
? ? ? ? //data用来存储数据的,数据供给el指定的容器去使用,值我们暂时写成一个对象 ?
? ? ? })
? ?</script>
</body>
</html>
3.vue的插值语法和指令语法
插值语法：<标签> {{xxx}} </标签>
指令语法：<标签 v-属性=“ ”> </标签>
（1）给属性绑定数据：v-bind：href=“url” data: {url："www.baidu.com" }
简写 :href=“url”
4.数据绑定
单向绑定：v-bind （哪里的属性都能使用，后台变前台变，前台变后台不变）
简写 :<input :value="address"></input>
双向绑定：v-model (只能用于表单类型，就是有value值的)
简写:<input v-model="address"></input>
5.el与data的两种写法
{{name}}---能够访问到name并不是因为她在data中出现
而是将data里面出现字段全部转换为vue实例的属性
所以他也能够访问原型中的数据properties
data：{
name:"东软"
}
el的两种写法
const c = new Vue({
//el方式一：
? ?el:"#app",
data:{
name:"东软"
}
});
//el方式2：
c.$mount("#app") //$mount挂载、绑定
data的两种写法
const c = new Vue({
?
? ?el:"#app",
? ?//方法1:对象式
data:{
name:"东软"
}
? ?//方法2：函数式 （较常用，因为使用组件）
? ?data：function(){
? ? ? ?return {name:"张三"}
? }
? ?//可简写
? ?data(){
? ? ? ?return {name:"张三"}//返回一个对象
? }
? ?
? ?//切记不能使用箭头函数
? ?this指的是当前vue实例
? ? ? ?有箭头函数的this指向的是window
? ? data：()=>{}
});
6.理解MVVM
vue受到MVVM的启发
与v-model
vue实例将数据挂载到容器中
M：model模型数据 //就是vue实例里面的data
V：view视图 //就是容器
VM：ViewModel视图模型//就是vue实例-----监听数据、绑定数据
? ?
//为什么v改M也改，而M改V也改？VM的作用：就是vue实例监听数据、绑定数据
7.Object.defineProperty给对象添加属性
如果做到变量1变成变量2的属性，且两者能够实现同变化
set(e){ name=e; -----重要的是这个，e=name时不能同变化 }
-----给变量2的属性赋值时，默认使用其set（）方法
-----当访问变量2的属性时，默认使用get（）方法
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<meta http-equiv="X-UA-Compatible" content="IE=edge">
? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
? ?<title>Document</title>
</head>
<body>
? ?<script>
? ? ? ?var name="zhangsan";
? ? ? ?var per={age:10,address:"东软"}
? ? ?
? ? ? ?Object.defineProperty(per,"name",{//给变量per添加name属性
? ? ? ? ? ?
? ? ? ? ? ?// 当访问per中的name属性时会自动调用getter
? ? ? ? ? ?get(){
? ? ? ? ? ? ? ?console.log("有人访问name了")
? ? ? ? ? ? ? ?return name;
? ? ? ? ? },
? ? ? ? ? ?// 当对per中的name属性赋值时会自动调用setter
? ? ? ? ? ?set(e){
? ? ? ? ? ? ? ?name=e;
? ? ? ? ? }
? ? ? })
? ? ? ?// name="lisi";
? ? ? ?per.name="lisi";
? ? ? ?console.log(name)
? ? ? ?console.log(per.name)
?
? ?</script>
</body>
</html>
8.数据代理
什么是数据代理？
一个对象代理另一个对象的数据操作
Object.defineProperty(对象1，“代理的属性1”，{
get（）{ return 对象1.属性1；}
set（e）{ 对象1.属性1=e}
})
Vue中的数据代理：就是VM进行的操作Object.defineProperty(）
Vue实例的属性中会有data中属性，也会有一个重要的属性_data
_data属性（代理vue实例进行监听和绑定操作）保存了date里面的键值对，
//Vue中的数据代理的基本原理
(1)通过Object.defineProperty()把data对象中的所有属性添加到vm（vue实例）上
(2)给每一个添加到VM中的属性添加一个getter/setter方法
(3)在getter/setter内部去操作（读/写）data属性中对应的属性
? ?从而做到你改我以为改
9.基本指令
（1）文本指令
v-html：会进行标签的解析，如<p>hello</p> 打印出 hello
v-text：不会进行标签解析，如<p>hello</p> 打印出 <p>hello</p>
（2）属性指令
02.Vue基本语法 · 语雀
1）属性绑定指令
2）绑定样式
----使用对象语法绑定样式：
----使用三目运算绑定样式：
----直接绑定内联样式
（3）事件指令
v-on：click=“方法1 ” -----简写 @click=“方法1 ”
methods：{
方法1（）{ alert（“我爱学习！”）}
}
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
? ?<title>Document</title>
? ?<script src="../js/vue.js"></script>
</head>
<body>
? ?<!--
事件的基本使用：
1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
-->
? ?<div id="app">
? ? ? ?<p>欢迎您,{{name}}</p>
? ? ? ?<button v-on:click="showmsg">我爱学习1</button>
? ? ? ? ? ?
? ? ? ?<button @click="showmsg1(111,$event)">我爱学习2</button>//又想传参数，又想操作事件
? ? ? ? ? ?
? ? ? ?<button @click="showinfo">我爱学习3</button>
? ?</div>
?<script>
? ?Vue.config.productionTip=false;
? ?var vm = new Vue({
? ? ? ?el: '#app',
? ? ? ?data: {
? ? ? ? ? ?name:"jack"
? ? ? },
? ? ? ?methods:{
? ? ? ? ? ?showmsg(){
? ? ? ? ? ? ? ?alert("我也爱学习!")
? ? ? ? ? },
? ? ? ? ? ?showmsg1(number,event){
? ? ? ? ? ? ? ?alert("我也爱学习!"+number)
? ? ? ? ? ? ? ?console.log(event.target.innerText)
? ? ? ? ? },
? ? ? ? ? ?showinfo(event){//event是点击的当前事件(dom节点)
? ? ? ? ? ? ? console.log(event.target.innerText)//.target目标对象//innerText/innerHtml获取到当前点击的内容
? ? ? ? ? }
? ? ? }
? })
?</script>
</body>
</html>
?
（4）事件修饰符
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
? ?<title>Document</title>
? ?<script src="../js/vue.js"></script>
? ?<style>
? ? ? ?*{
? ? ? ? ? ?margin-top: 20px;
? ? ? }
? ? ? .one{
? ? ? ? ? ?padding: 10px;
? ? ? ? ? ?height: 100px;
? ? ? ? ? ?width: 200px;
? ? ? ? ? ?background: skyblue;
? ? ? }
? ? ? .two{
? ? ? ? ? ?height: 30px;
? ? ? ? ? ?width: 100px;
? ? ? ? ? ?background:goldenrod;
? ? ? }
? ? ? .three{
? ? ? ? ? ?padding: 0px;
? ? ? ? ? ?width: 200px;
? ? ? ? ? ?height: 200px;
? ? ? ? ? ?border: 2px solid red;
? ? ? ? ? ?overflow: auto;
? ? ? ? ?
? ? ? }
? ? ? .three li{
? ? ? ? ? ?margin: 0px;
? ? ? ? ? ?width: 200px;
? ? ? ? ? ?height:100px;
? ? ? ? ? ?background: greenyellow;
? ? ? }
? ?</style>
</head>
<body>
? ?<!--
Vue中的事件修饰符：
1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
-->
? ?<div id="app">
? ? ? ?<!--prevent：阻止默认事件（常用）-->
? ? ? ?<a href="http://www.baidu.com" @click.prevent="showmsg">欢迎您,{{name}}</a></br>
? ? ?
? ? ? ?<!--阻止事件冒泡（常用）-->
? ? ? ?<div class="one" ?@click="showmsg">
? ? ? ? ? ?<div class="two" @click.stop="showmsg" ></div>
? ? ? ?</div>
?
? ? ? ?<!--once：事件只触发一次（常用）-->
? ? ? ?<button @click.once="showmsg">点我吧</button>
?
? ? ? ?<!--capture：使用事件的捕获模式；-->
? ? ? ?<div class="one" @click.capture="showinfo(2)">
? ? ? ? ? ?div1
? ? ? ? ? ?<div class="two" @click="showinfo(2)" >
? ? ? ? ? ?div2
? ? ? ? ? ?</div>
? ? ? ?</div>
?
? ? ? ?<!-- 只有event.target是当前操作的元素时才触发事件； -->
? ? ? ?<div class="one" @click.self="showmsg1($event,1)">
? ? ? ? ? ?div1
? ? ? ? ? ?<div class="two" @click="showmsg1($event,2)" >
? ? ? ? ? ?div2
? ? ? ? ? ?</div>
? ? ? ?</div>
?
? ? ? ?<!--passive：事件的默认行为立即执行，无需等待事件回调执行完毕-->
? ? ? ?<ul class="three" @scroll.passive="show">
? ? ? ? ? ?<li>1</li>
? ? ? ? ? ?<li>2</li>
? ? ? ? ? ?<li>3</li>
? ? ? ? ? ?<li>4</li>
? ? ? ? ? ?<li>5</li>
? ? ? ?</ul>
? ?</div>
? ?<script>
? ? ? ?Vue.config.productionTip=false;
? ? ? ?var vm = new Vue({
? ? ? ? ? ?el: '#app',
? ? ? ? ? ?data: {
? ? ? ? ? ? ? ?name:"zhangsan"
? ? ? ? ? },
? ? ? ? ? ?methods: {
? ? ? ? ? ? ? ?showmsg(){
? ? ? ? ? ? ? ? ? ?alert("我爱中国!");
? ? ? ? ? ? ? },
? ? ? ? ? ? ? ?showinfo(number){
? ? ? ? ? ? ? ? ? ?console.log(number)
? ? ? ? ? ? ? },
? ? ? ? ? ? ? ?showmsg1(event,number){
? ? ? ? ? ? ? ? ? ?console.log(event.target)
? ? ? ? ? ? ? ? ? ?console.log(number)
? ? ? ? ? ? ? },
? ? ? ? ? ? ? ?show(){
? ? ? ? ? ? ? ? ? ?for(var i=0;i<10000;i++){
? ? ? ? ? ? ? ? ? ? ? ?console.log(i)
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }
? ? ? ? ? }
? ? ? })
? ?</script>
</body>
</html>
（5）键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!--
1.Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
3.系统修饰键（用法特殊）：ctrl、alt、shift、meta（就是window键）
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用：正常触发事件。
4.也可以使用keyCode去指定具体的按键（不推荐）
5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
-->
<div id="app">
<p>欢迎您,{{name}}</p></p></p>
<input type="text" placeholder="请输入用户名" @keydown.huiche="showmsg"></input>
</div>
<script>
Vue.config.productionTip=false;
//Vue.config.keyCodes.huiche = 13;
var vm = new Vue({
el: '#app',
data: {
name:"zhangsan"
},
methods: {
showmsg(event){
// alert(event.target.value)
console.log("keyCode:"+event.keyCode+" key:"+event.key)
}
}
})
</script>
</body>
</html>
|