Vue基础知识学习1
本文基于B站尚硅谷的Vue学习教程，推荐大家去观看。
vue简介">一. Vue简介
Vue是一套用于构建用户界面的渐进式js框架，它的学习可以分为以下6个部分。
- Vue基础
- vue-cli
- vue-router
- vuex
- element-ui
- vue3
Vue有三个主要的特点：
采用组件化模式，提高代码复用率、且让代码更好维护。
声明式编码，让编码人员无需直接操作DOM，提高开发效率。
使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
理解组件化的含义，组件后缀为.vue，包括html，css，和js代码
这里推荐vue的官网，里面有文档和很多学习资源。
学习Vue之前要掌握的JavaScript基础知识包括ES6语法规范，ES6模块化，包管理器，原型、原型链，数组常用方法，axios，promise等等。
二. 搭建Vue开发环境
简单配置：
- 官网下载开发版本vue.js
- 浏览器安装vue devtools（一般浏览器插件库里可以搜到）
- 在html文件对vue.js进行引用即可完成一些简单的实验。
三. vue的知识点
1. vue的入门常识
<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue模板语法</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<!--
初识Vue:
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象;
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法;
3.root容器里的代码被称为Vue模板;
4.Vue实例和容器是一一对应的;
5.真实开发中只有一个Vue实例， 并且会配合着组件一起使用;
6.{{xxx}}中的xxx要写js表达式，且xx可以自动读取到data中的所有属性;
7.且data中的数据发生改变，那么模板中用到该数据的地方也会自动更新;
-->
<!-- 创建一个容器 为Vue提供模板，展示Vue的工作成果 -->
<div id="root">
<h2>hello {{name}} {{school.address}}</h2> <!-- {{}}是分隔符（插值语法） 里面需要是js表达式-->
</div>
<script type="text/javascript">
//修改全局配置
Vue.config.productionTip=false;//阻止Vue在启动时生成生产提示
//创建Vue实例
// const x= Vue实际上是一个构造函数
new Vue({
el:\'#root\', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
name:\'hhh\',
school:{
name:\'法拉希\',
address: \'北京西路\',
}
}
});//只传一个参数——配置对象
//容器和实例是一一对应的关系
</script>
</body>
</html>
2. 两大类模板语法
<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue模板语法</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<!--
Vue模板语法有2大类:
1.插值语法:
功能:用于解析标签体内容。
写法: {{xxx}}, xxx是js表达式，且可以直接读收到data中的所有属性。
2.指令语法:
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件.....)。
举例: v-bind:href="xxx" 或简写为 :href="xxx", xxx同样要写js表达式，
且可以直接读取到data中的所有属性。
备注: Vue中有很多的指令，且形式都是: v-????，此处我们只是拿v-bind举个例子。
-->
<div id="root">
<h1>插值语法</h1>
<h2>hello {{name}} {{school.address}}</h2> <!-- {{}}是分隔符（插值语法） 里面需要是js表达式-->
<h1>指令语法</h1>
<a v-bind:href="url">百度</a> <!--动态绑定 url就变成了js表达式-->
<a :href="url.toUpperCase()">百度</a>
</div>
<script type="text/javascript">
//修改全局配置
Vue.config.productionTip=false;
//创建Vue实例
// const x= Vue实际上是一个构造函数
new Vue({
el:\'#root\', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
name:\'hhh\',
url:\'http://www.baidu.com\',
school:{
name:\'法拉希\',
address: \'北京西路\',
}
}
});
</script>
</body>
</html>
3. 数据绑定
<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue2数据绑定</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<!--
Vue中有2种数据绑定的方式:
1.单向绑定(v-bind):数据只能从data流向页面。
2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。
备注:
1.双向绑定都应用在表单类元素上(如: input、 select等)
2.v-model:value可以简写为v-model,因为v-model 默认收集的就是value值。
-->
<div id="root">
单向数据绑定：<input type="text" v-bind:value="name"><br/>
双向数据绑定：<input type="text" v-model:value="address">
<!-- 简写-->
单向数据绑定：<input type="text" :value="name"><br/>
双向数据绑定：<input type="text" v-model="address">
<!-- v-model只能应运用在表单类元素上（输入类元素），对value进行修改-->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;
new Vue({
el:\'#root\',
data:{
name:\'hhh\',
address:\'French\',
}
})
</script>
</html>
4. el和data的两种写法
<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue2数据绑定</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="root">
单向数据绑定：<input type="text" v-bind:value="name"><br/>
双向数据绑定：<input type="text" v-model:value="name">
</div>
</body>
<!--
data与e1的2种写法
1.e1有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例，随后再通过vm.$mount(\'#root\')指定e1的值。
2. data有2种写法
(1).对象式
(2).函数式
如何选择:目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错
3.一个重要的原则:
由Vue管理的函数如data()，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
-->
<script type="text/javascript">
Vue.config.productionTip=false;
// el的两种写法
const v=new Vue({
// el:\'#root\', //第一种方法
data:{
name:\'并发地\',
}
})
//延时器 实例与容器相配的第二种方法 称为挂载，会更加灵活一些
setTimeout(()=>{
v.$mount(\'#root\'); //成功了，两秒之后动态
},2000);
//data的两种写法
new Vue({
el:\'#root\',
// 第一种方法 对象式
/*data:{
name:\'并发地\',
}*/
//第二种方法 函数式 写成data()也可以
data:function (){
console.log(\'$$\',this);
return{
name:\'啦啦啦\'
}
}
})
</script>
</html>
5. MVVM模型
Model：对应data中的数据
View：模板，也就是用户界面
ViewModel：视图模型，也就是Vue实例对象，模型通过它可以将数据绑定到页面上，视图可以通过它将数据映射到模型上。
MVVM的优点？
- 低耦合。视图（View）可以独立于Model变化和修改。
- 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
- 前后端分离。开发人员可以专注于业务逻辑（ViewModel）和数据的开发，设计人员可以专注于页面设计。
视频里的图示特别清晰明了
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>MVVM模型</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<!-- vm（Vue实例对象）和Vue原型对象上所有的属性和方法在模板中都能被识别到-->
<div id="root">
<h1>{{name}}</h1>
<h1>{{address}}</h1>
<h1>测试1{{1+1}}</h1>
<h1>测试2{{$options}}</h1>
<h1>测试3{{$emit}}</h1>
<h1>测试4{{_c}}</h1>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;
const vm=new Vue({
el:\'#root\',
data:{
name:\'rered\',
address: \'beijing\',
a:1
}
})
</script>
</html>
6. Object.defineProperty
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Object.defindProperty</title>
</head>
<body>
<script>
let number=18;
let person={
name:\'张三\',
sex:\'男\',
}
//给相应对象添加相对属性
Object.defineProperty(person,\'age\',{
value:18,
enumerable:true,//控制属性是否可枚举
writable:true,//控制属性是否可被修改，默认为false
configurable:true,//控制属性是否可被删除
//当读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
get:function (){
return number;
},
//当修改person的age属性时，setter就会被调用，且会收到修改的具体值
set(value){
console.log();
number=value;
}
//双向绑定的原理，面试常问，类似于java中的类的修改器和访问器
});
console.log(Object.keys(person));
console.log(person);
</script>
</body>
</html>
7. 数据代理
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>什么是数据代理</title>
</head>
<body>
<!--
数据代理：通过一个对象代理对另一个对象中属性的操作（读写）
比如这里，obj2可以对obj中的属性进行操作，即代理
-->
<script type="text/javascript">
let obj={x:100};
let obj2={y:200};
Object.defineProperty(obj2,\'x\',{
get(){
return obj.x;
},
set(value){
obj.x=value;
}
})
</script>
</body>
</html>
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的数据代理</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<!--
1.Vue中的数据代理:
通过vm对象来代理data对象中属性的操作(读/写)
2.Vue中数据代理的好处:
更加方便的操作data中的数据
3.基本原理:
通过0bject.defineProperty()把data对象中所有属性添加到vm上。
为每个添加到vm上的属性，都指定个getter/setter。
在getter/setter内部去操作(读/写) data中对应的属性。
-->
<div id="root">
<h1>{{name}}</h1>
<h1>{{address}}</h1>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;
const vm=new Vue({
el:\'#root\',
data:{
name:\'rered\',
address: \'beijing\',
a:1,
}
})
</script>
</html>
如图，本来应该写成{{_data.name}}的形式，但由于有数据代理，于是上面的代码中可以直接写成{{name}}去获取属性值，可以看到底下有data中各个属性的get和set。
8. Vue中的事件
（1）事件处理
<!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>事件处理</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<!--
事件的基本使用:
1.使用v-on:xXx或@xx绑定事件，其中xxx是事件名:
2.事件的回调需要配置在methods对象中，最终会在vm上;
3. methods中配置的函数，不要用箭头函数!否则this就不是vm了，就变成windows了;
4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象;
5. @click=" demo"和@click= "demo($event)"效果一致， 但后者可以传参;
所有被Vue管理的函数尽量写成普通函数，而不是箭头函数。
vm只会为data中的数据做代理，所以回调函数不要写到data中，那样会给vue造成负担。
-->
<div id="root">
<h1>啦啦啦你好！{{name}}</h1>
<button v-on:click="showInfo1">提示信息1（不传参）</button>
<button @click="showInfo2(66,$event)">提示信息2（传参）</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;
const vm=new Vue({
el:\'#root\',
data:{
name:\'rered\',
address: \'beijing\',
a:1
},
//可以配置很多事件的回调
methods:{
//传了个事件对象
showInfo1(event){
alert(\'tonxuenihao1\');
console.log(event.target.innerText);
console.log(this);//就是Vue实例对象vm
},
showInfo2(number,event){
alert(\'tonxuenihao2\');
// console.log(event.target.innerText);
// console.log(this);//就是Vue实例对象vm
console.log(number,event);
}
}
})
</script>
</html>
（2）事件修饰符
<!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>事件修饰符</title>
<script type="text/javascript" src="vue.js"></script>
<style>
*{
margin-top: 20px;
}
.demo1{
height: 50px;
background-color: skyblue;
}
.box1{
padding: 5px;
background-color: skyblue;
}
.box2{
padding: 5px;
background-color: orange;
}
.list{
width: 200px;
height: 200px;
background-color: peru;
overflow: auto;
}
li{
height: 100px;
}
</style>
</head>
<body>
<!--
捕获由外到内，冒泡由内到外，在冒泡阶段处理事件
Vue中的事件修饰符:
1.prevent:阻止默认事件(常用) ;
2.stop:阻止事件冒泡(常用) ;
3.once: 事件只触发一次(常用) ;
4.capture:使用事件的捕获模式;
5.self:只有event.target是当前操作的元素时才触发事件;
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕;
主要记住前三个，后三个作为拓展
修饰符可以连续写，比如@click.prevent.stop
-->
<div id="root">
<h1>啦啦啦你好！{{name}}</h1>
<!-- //使用prevent就阻止了默认事件-->
<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
<!-- 阻止事件冒泡(常用) stop-->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我冒泡</button>
</div>
<!-- once: 事件只触发一次(常用)-->
<button @click.once="showInfo">点我冒泡</button>
<!-- 使用事件的捕获模式-->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
<!-- 只有event.target是当前操作的元素时才触发事件-->
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">点我呀呀呀</button>
</div>
<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕-->
<!-- 滚动有两个单词 scroll(滚动条） and wheel(滚轮）-->
<ul class="list" @wheel="demo">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;
const vm=new Vue({
el:\'#root\',
data:{
name:\'rered\',
address: \'beijing\',
a:1
},
methods:{
showInfo(e){
// alert("同学你好！");
console.log(e.target);
},
showMsg(msg){
console.log(msg);
},
demo(){
console.log(\'@\');
}
}
})
</script>
</html>
（3）键盘事件
<!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<script type="text/javascript" src="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
(1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2) .配合keydown使用:正常触发事件。
4.也可以使用keyCode去指定具体的按键(不推荐)
5. Vue. config. keyCodes.自定义键名=键码，可以去定制按键别名
-->
<div id="root">
<h1>啦啦啦你好！{{name}}</h1>
<input type="text" placeholder="回车提示输入" @keyup="showInfo">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;
Vue.config.keyCodes.huiche=13;//相当于定义了回车的别名
const vm=new Vue({
el:\'#root\',
data:{
name:\'rered\',
address: \'beijing\',
a:1
},
methods:{
showInfo(e){
console.log(e.key,e.keyCode);
//可以加个判断是否是回车按键再进行输出，或者在前面@keyup.enter
if(e.keyCode!==13)
return ;
console.log(e.target.value);
},
}
})
</script>
</html>
以上是 Vue基础知识学习1 的全部内容， 来源链接： utcz.com/z/379233.html
