目录
定义
一套用于构建用户界面的`渐进式JS框架`
特点
要掌握的JS基础知识
ES6语法规范,ES6模块化,包管理器,原型、原型链,数组常用方法,axios,promise
- 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>Documenttitle>
- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
-
- head>
- <body>
- <div id="root">
- <h1>hello,{{name}}h1>
- div>
- <script>
- Vue.config.productionTip=false;//阻止vue在启动生成生产提示
- new Vue({
- el:'#root',//el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串
- data:{//data用于存储数据,数据供el所指定的容器去只用,值暂时先写成一个对象
-
- name:'尚硅谷'
- }
- })
- script>
-
- body>
- html>
注意区分:js表达式和js代码(语句)
1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方
2.js代码(语句)
两大类
1.插值语法
2.指令语法
- 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>Documenttitle>
- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
-
- head>
- <body>
- <div id="root">
- <h1>插值语法h1>
- <h3>你好,{{name}}h3>
- <hr>
- <h1>指令语法h1>
- <a :href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1a>
- <a v-bind:href="school.url">点我去{{school.name}}学习2a>
- div>
- <script>
- Vue.config.productionTip=false
- new Vue({
- el:'#root',
- data:{
- name:'jack',
- school:{
- name:'shangguigu',
- url:'http://www.atguigu.com',
- }
- }
- })
- script>
- body>
- html>
2种方式
备注:
- 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>Documenttitle>
- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
-
- head>
- <body>
- <div id="root">
-
- 单向数据绑定:<input type="text" v-bind:value="name"><br>
- 双向数据绑定:<input type="text" v-model:value="name"><br>
-
- 单向数据绑定:<input type="text" :value="name"><br>
- 双向数据绑定:<input type="text" v-model="name"><br>
-
- <hr>
-
- div>
- body>
- <script>
- Vue.config.productionTip=false//阻止vue在启动时生成生产提示
- new Vue({
- el:'#root',
- data:{
- name:'aaa'
- }
-
- })
-
- script>
- html>
1.`el`
2.`data`
如何选择:目前都可以,以后学习组件时,data必须用函数式,否则会报错
3.一个重要的原则
- 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>Documenttitle>
- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
-
- head>
- <body>
- <div id="root">
- <h1>你好,{{name}}h1>
- div>
-
- body>
- <script>
- Vue.config.productionTip=false//阻止vue在启动时生成生产提示
- const v=new Vue({
- el:'#root',//第一种写法
- data:{
- name:'尚硅谷'
- }
- })
- console.log(v);
- v.$mount('#root')//第二种写法
-
- //data的两种写法
- new Vue({
- el:'#root',
- // data:{
- // name:'shang'
- // }
- // 第二种写法
- data(){//data:function(){}
- name:'shang'
- }
- })
-
-
- script>
- html>
`data Bindings`:数据保存在Model中,要将数据表现在页面中,得将数据通过数据绑定传到View上
`DOM Listeners`:DOM监听,当在View中修改数据的时候,Model中的数据也会发生改变
观察发现:
- 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>Documenttitle>
- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
-
- head>
- <body>
- <script>
- let number=18
- let person={
- name:'张三',
- sex:'男'
- }
-
- Object.defineProperty(person,'age',{
- value:18,
- enumerable:true,//控制属性是否可以枚举,默认值是false
- writable:true,//控制属性是否可以被修改,默认值是false
- configurable:true,//控制属性是否可以被删除,默认值是false
-
- // 当有人读取person的age属性,get函数(getter)
- // 就会被调用,且返回值就是age的值
- get(){
- console.log('有人读取age属性了')
- return number
- },
-
- set(value){
- console.log('有人修改了age属性,且值是',value);
- number=value
- }
-
- })
- script>
- body>
- html>
通过一个对象代理对另一个对象中属性的操作(读/写)
- let obj={x:100}
- let obj2={y:200}
-
- Object.defineProperty(obj2,'x',{
- get(){
- return obj.x
- },
- set(value){
- obj.x=value
- }
- })
-
1.Vue中的数据代理
2.Vue中的数据代理的好处
3.基本原理
- 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>Documenttitle>
- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
-
- head>
- <body>
- <div id="root">
- <h1>学校名称:{{name}}h1>
- <h1>学校地址:{{address}}h1>
- div>
- body>
- <script>
- Vue.config.productionTip=false//阻止vue在启动时生成生产提示
- const vm=new Vue({
- el:'#root',
- data:{
- name:'atuigu',
- address:'北京'
- }
-
- })
-
- script>
- html>
- 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>Documenttitle>
- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
-
- head>
- <body>
- <div id="root">
- <h1>欢迎来到{{name}}h1>
-
-
- <button @click="showInfo">点我学习一下1(不传参)button>
- <button @click="showInfo2($event,666)">点我学习一下2(传参)button>
-
- div>
- body>
- <script>
- Vue.config.productionTip=false//阻止vue在启动时生成生产提示
- const vm=new Vue({
- el:'#root',
- data:{
- name:'atguigu'
- },
- methods:{
- showInfo(event){
- // alert('同学你好')
- // console.log(a,b,c,d)
- // console.log(event.target.innerText);
- // console.log(event.target);
- console.log(this);//vm
-
- },
- showInfo2(event,number){
- alert('同学你好!!')
- console.log(number,event);
- // console.log(a,b,c,d)
- // console.log(event.target.innerText);
- // console.log(event.target);
- // console.log(this);//vm
-
- }
- }
-
- })
-
- script>
- html>
- 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>Documenttitle>
- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
-
- <style>
- *{
- margin-top: 20px;
-
- }
- .demo1{
- height: 50px;
- background-color: #bfa;
- }
- .box1{
- height: 50px;
- background-color: #bfa;
- }
- .box2{
- height: 50px;
- background-color: skyblue;
- }
- style>
- head>
- <body>
- <div id="root">
- <h2>欢迎来到{{name}}h2>
-
- <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息a>
-
-
- <div class="demo1" @click="showInfo">
- <button @click.stop="showInfo">点我提示信息button>
- div>
-
-
- <div>
- <button @click.once="showInfo">点我提示信息button>
- div>
-
-
- <div class="box1" @click.capture="showMsg(1)">
- div1
- <div class="box2" @click="showMsg(2)">
- div2
- div>
- div>
-
-
- <div class="demo1" @click.self="showInfo">
- <button @click.once="showInfo">点我提示信息button>
- div>
-
-
- <ul @wheel.passive="demo" class="list">
- <li>1li>
- <li>2li>
- <li>3li>
- <li>4li>
- ul>
- div>
- body>
- <script>
- Vue.config.productionTip=false//阻止vue在启动时生成生产提示
- new Vue({
- el:'#root',
- data:{
- name:'guigu'
- },
- methods:{
- showInfo(e){
- alert('你好')
- // console.log(e.target);
- },
- showMsg(msg){
- console.log(msg);
- }
- }
-
- })
-
- script>
- html>
1.
回车 | enter |
删除 | delete |
退出 | esc |
空格 | space |
换行 | tab |
上 | up |
下 | down |
左 | left |
右 | right |
2.Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注定要转为kebab-case(短横线命名)
3.系统修饰键(用法特殊):`ctrl` `alt ` `shift` `meta`
4.也可以使用`keyCode`去指定具体的按键(不推荐)
5.`Vue.config.keyCodes.自定义键名=键名`,可以去指定按键别名
- 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>Documenttitle>
- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
-
- head>
- <body>
- <div id="root">
- <h2>欢迎来到{{name}}h2>
- <input type="text" placeholder="按下回车提示输入" @keyup.13 ="showInfo">
- div>
- body>
- <script>
- Vue.config.productionTip=false//阻止vue在启动时生成生产提示
- // Vue.config.keyCodes.huiche=13//定义了一个别名按键
- new Vue({
- el:'#root',
- data:{
- name:'花京院'
- },
- methods:{
- showInfo(e){
- // if(e.keyCode!==13) return
- console.log(e.key,e.keyCode);
- console.log(e.target.value);
- }
- }
-
-
- })
-
- script>
- html>
注意:
1.修饰符可以连续写
- <div class="demo1" @click="showInfo">
- <a href="http://www.atguigu.com" @click.stop.prevent="showInfo">点我提示信息a>
- div>
2.连按两个键
- <div id="root">
- <h2>欢迎来到{{name}}h2>
- <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y ="showInfo">
- div>
1.插值语法
- 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>Documenttitle>
- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
-
- head>
- <body>
- <div id="root">
- 姓:<input type="text" v-model:value="firstname"><br><br>
-
- 名:<input type="text" v-model="lastname"><br><br>
- 姓名:<span>{{firstname.slice(0,3)}}-{{lastname}}span>
- div>
- body>
- <script>
- Vue.config.productionTip=false//阻止vue在启动时生成生产提示
- new Vue({
- el:'#root',
- data:{
- firstname:'张',
- lastname:'三'
- }
-
- })
-
- script>
- html>
2.methods实现
当数据发生改变,Vue会重新调用,重新解析
- 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>Documenttitle>
- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
-
- head>
- <body>
- <div id="root">
- 姓:<input type="text" v-model:value="firstname"><br><br>
-
- 名:<input type="text" v-model="lastname"><br><br>
- 姓名:<span>{{fullname()}}span>
- div>
- body>
- <script>
- Vue.config.productionTip=false//阻止vue在启动时生成生产提示
- new Vue({
- el:'#root',
- data:{
- firstname:'张',
- lastname:'三'
- },
- methods:{
- fullname(){
- return this.firstname+'-'+this.lastname
- }
- }
-
- })
-
- script>
- html>
1.定义:要用的属性不存在,要通过已有属性计算得来
2.原理:底层借助了Object.defineproperty方法提供的getter和setter
3.get什么时候调用?
4.get的作用:当有人读取fullName时,get就会被调用,且返回值就作为fullName的值
5.什么时候调用set?
6.优势:与methods实现相比,内部有缓存机制(复用),效率更高,雕塑方便
5.备注
- 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>Documenttitle>
- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
-
- head>
- <body>
- <div id="root">
- 姓:<input type="text" v-model:value="firstname"><br><br>
-
- 名:<input type="text" v-model="lastname"><br><br>
- 姓名:<span>{{fullName}}span><br><br>
- 姓名:<span>{{fullName}}span><br><br>
- 姓名:<span>{{fullName}}span><br><br>
- 姓名:<span>{{fullName}}span><br><br>
- div>
- body>
- <script>
- Vue.config.productionTip=false//阻止vue在启动时生成生产提示
- let a=1
- const vm=new Vue({
- el:'#root',
- data:{
- firstname:'张',
- lastname:'三',
- x:'你好'
- },
- methods:{
- demo(){
-
- }
- },
- computed:{
- fullName:{
- get(){
- console.log('get被调用了');
- // console.log(this);//vue
- return this.firstname+'-'+this.lastname
- },
- set(value){
- console.log('set',value);
- const arr=value.split('-')
- this.firstname=arr[0]
- this.lastname=arr[1]
- }
- }
- }
- })
-
- script>
- html>
只考虑读取不考虑修改
- computed:{
- fullName(){
- console.log('get被调用了');
- return this.firstname+'-'+this.lastname
- }
- }