特图sama

Vue2学习教程（图文齐全，附带gif动图更加简单易懂）

Vue学习笔记

1.初识vue，hello world

初识vue
1、想让vue工作，就必须创建一个vue实例，且要传入一个配置对象
2.root容器里的代码依然符合HTML规范，只不过混入了一些特殊的vue语法
3.root容器里的代码称为[vue模板]
4.vue实例和容器是一一对应关系。
5.真实开发中只有一个vue实例，并且会配合组件一起使用
6.{{xxx}}中的xxx要写JS表达式，且xxx可以自动读取到data中的所有属性
7.一旦data中数据发生变化，那么页面中会用到该数据的地方也会自动更新

注意区分：JS表达式bJS代码（语句）
	1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
		（1）a
		 (2)a+b
		 (3)demo(1)
		 (4)x===y?'a':'b'
	2.Js代码
		（1）if(){}
		 (2)for(){}

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">
    <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon">
    <link rel="stylesheet" href="reset.css">
    <title>Js轮播图title>
    <script src="./vue.js">script>
head>
<body>
    
   <div id="root">
       <h1>hello: {{name}} 年龄：{{age}} 地址：{{address}}h1>
   div>
   
   <script type="text/javascript">
       const x=new Vue({
           el:'#root',  //el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
           data:{
            //    data中用于存储数据，数据供el所指定的容器去使用，值暂时先写成一个对象
               name:'特图',
               age:18,
               address:"上海"
        }
       })
   script>
body>
html>

(动态修改效果展示)

2.模板语法

Vue模板有2大类
1.插值语法：
	功能：用于解析标签体内容
	写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性
2.指令语法
	功能：用于解析标签，（包括标签属性，标签体内容，绑定事件）
	例子：v-bind:href="xxx"或简写为：href="xxx",xxx同时要写JS表达式
	且可以直接读取到data中的所有属性
备注：vue中有很多的指令，且形式都是v-???,此处我们只是拿v-bind举例子




    
    
    
    
    
    Js轮播图
    


    
   
       插值语法
       hello: {{name}} 年龄：{{age}} 地址：{{address}}
        
        指令语法
        
        点我去{{school.name}}官网
        点我去{{school.name}}官网

3.数据绑定

vue中有两种数据绑定的方式
1.单项数据绑定（v-bind）:数据只能从data流向页面
2.双向数据绑定（v-modle）:数据不仅能从data流向页面，还可以从页面流向data
	备注：
		1.双向绑定一般应用在表单类元素上（如input,select等）
		2.v-model:value 可以简写为v-model,因为v-model默认收集的就是value值

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">
    <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon">
    <link rel="stylesheet" href="reset.css">
    <title>Js轮播图title>
    <script src="./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>

      
      <h2 v-model="name">你好h2>
   div>
   
   <script type="text/javascript">
       const x=new Vue({
           el:'#root',  
           data:{
               name:'特图',
               age:18,
               address:"上海",
            //    二级对象
               school:{
                name:'尚硅谷',
                url:"http://www.baidu.com",
                x:"我是二级中的x"
               }
        }
       })
   script>
body>
html>

4.el与data的两种写法

data与el的两种写法
	1.el有两种写法
		（1）new Vue时放置el属性
		（2）	先创建Vue实例，随后再通过vm.$mount('XXX')来指定el的值
	2.data有两种写法
		 （1）对象式
		 （2）函数式
			学习到组件时，data必须使用函数式
	3.一个重要原则：
		由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不在是vue实例了




    
    
    
    
    
    Js轮播图
    


    
   
      你好,{{name}}

（第二种与之前的等效）

5.MVVM模型

MVVM模型
	1.M：模型（model）：data中的数据
	2.V：视图（vew）：模板代码
	3.VM：视图模型（viewModel）：vue实例对象
观察发现：
	1.data中所有的属性，最后都出现在了vm身上
	2.vm身上的所有的属性及vue原型上的所有属性，在vue模板都可以直接使用

6.object.defineProperty

相对于Java中的get,set函数

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">
    <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon">
    <link rel="stylesheet" href="reset.css">
    <title>Js轮播图title>
    <script src="./vue.js">script>
head>
<body>
   
   <script type="text/javascript">
       let number=18;
       let person={
           name:'张三',
           sex:'男'
       }
       Object.defineProperty(person,'age',{
        // enumerable：true 控制属性是否可以枚举，默认值是false
        // writeable：true  控制属性是否可以被修改，默认值是false
        // configurable：true 控制属性是否可以被删除，默认值是false
        
        // 当有人读取person的age属性时，getter函数就会被调用，且返回值就是age的值
        get(){
            console.log("有人读取age属性");
            return number
        },
        // 当有人修改person的age属性时，setter函数就会被调用，且会收到修改的值
        set(value){
            console.log("有人修改了age属性，其值是",value);
            number=value
        }
       })
   script>
body>
html>

7.数据代理

数据代理：通过一个对象代理对另一个对象中的属性的操作（读/写）

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">
    <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon">
    <link rel="stylesheet" href="reset.css">
    <title>Js轮播图title>
    <script src="./vue.js">script>
head>
<body>
   
   <script type="text/javascript">
      let obj={x:100}
      let obj2={y:200}
      Object.defineProperty(obj2,'x',{
          get(){
              console.log("访问到了obj的x")
              return obj.x
          },
          set(value){
              console.log("修改了obj的x")
            obj.x=value
          }
      })
   script>
body>
html>

8.Vue中的数据代理

1.Vue中的数据代理:
	通过vm对象来代理data对象中属性的操作
2.vue中数据代理的好处
	更加方便的操作data中的数据
3.基本原理
	通过object.defineProperty()把data对象中所有属性添加到vm
	为每一个添加到vm上的属性，都指定一个getter/setter
	在getter/setter内部去操作（读/写）data中对应的属性

9.事件处理

事件的基本使用
1.使用v-on:xxx或@xxx 绑定事件，其中xxx是事件名
2.事件的回调需要配置在method对象中，最终会在vm上
3.methods中配置的函数，不要有箭头函数，否则this就不是vm了
4.methods中配置的函数，都是被vue所管理的函数，this的指向是vue或组件实例对象
5.@click="demo"和@click="click($event,xxx)"效果一样但是后者可以传参和使用event对象




    
    
    
    
    
    Js轮播图
    


    
    欢迎来到{{name}}学习

10.事件修饰符

Vue中的事件修饰符（属性）：
	1.prevent:阻止默认事件（常用）
	2.stop:终止事件冒泡（常用）
	3.once：事件只触发一次（常用）
	4.capture：使用事件的捕获阶段
	5.self：只有event.target是当前操作的元素时才触发事件
	6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕

11.键盘事件

Vue中常用的按键别名：
回车=》enter
删除=》delete（捕获“删除”和退格键）
退出=》esc
空格=》esc
换行=》tab
上=》up
下=》down
左=》left
右=》right

2.Vue未提供别名的按键。可以 使用按键原始的key值去绑定，但是要注意转为kebab-case(短横线命名法)
如：CapsLock要改写为caps-lock

3.系统修饰符（用法特殊）：ctrl,atl,shift,meta(win键)
	（1）配合keyup使用：按下修饰键的同时，再按下其他键，事件才被触发
	（2）配合keydown使用，正常触发事件
4.也可以使用keycode去指定具体的按键（不推荐）
5.Vue.config.keyCodes.自定义键名，可以去定义按键别名

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">
    <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon">
    <link rel="stylesheet" href="reset.css">
    <title>Js轮播图title>
    <script src="./vue.js">script>
head>
<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习h2>
        <input type="text" placeholder="按下ctrl+加任意键获得输入值" @keyup.ctrl="showinfo">
        <input type="text" placeholder="按下回车获得输入值" @keyup.enter="showinfo">
    div>
   <script type="text/javascript">
      const vm=new Vue({
        el:"#root",
        data:{
            name:"尚硅谷",
        },
        methods:{
            showinfo(e){
                console.log(e.target.value)
            }
        }
      })
   script>
body>
html>

12.事件小技巧

1.事件修饰符可以结合使用
	如：@click.prevnt.stop——————>先停止默认事件再停止冒泡
2.键盘事件名称也是可以结合使用的
	如：@keyup.ctrl.y————————>同时按下ctrl和y才触发事件

13.姓名案例

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">
    <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon">
    <link rel="stylesheet" href="reset.css">
    <title>title>
    <script src="./vue.js">script>
head>
<body>
    <div id="root">
       姓：<input type="text" v-model="first_name"><br>
       名：<input type="text" v-model="last_name"><br>
       <span>全名:{{fullname()}}span>
    div>
   <script type="text/javascript">
      const vm=new Vue({
        el:"#root",
        data:{
            first_name:'张',
            last_name:'三'
        },
        methods:{
            fullname(){
                return this.first_name+this.last_name;
            }
        }
      })
   script>
body>
html>

14.计算属性

计算属性
1.定义：要用的属性不存在，要通过已有属性计算得来
2.原理：底层借助了Object。defineproperty方法提供的getter和setter
3.get函数什么时候执行？
	（1）初次读取时会执行一次
	（2）当依赖的数据发生改变时会被再次调用
4.优势：与methods实现出现在vm上，直接读取使用即可
5.备注：
	1.计算属性最终会出现在vm上，直接读取即可
	2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要计算时依赖的数据发生改变




    
    
    
    
    
    
    


    
       姓：

       名：

       全名:{{fullname}}

（初次刷新页面）

（修改全名）

15.计算属性的简写




    
    
    
    
    
    
    


    
       姓：

       名：

       全名:{{fullname}}

16.监视属性

监视属性：
	1.当被监视的属性变化时，回调函数自动调用，进行相关操作
	2.监视的属性必须存在，才能进行监视
	3.监视的两种写法
		（1）new Vue时传入watch配置
		（2）通过vm.$watch监视




    
    
    
    
    
    
    


    
       今天天气{{info}}

17.深度监视

深度监视：
	1.Vue中的watch默认不监测对象内部值的改变（一层）
	2.配置deep:true可以监测对象内部值改变（多层）
备注
	（1）.vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
	（2）使用watch时根据数据的具体结构，决定是否采用深度监视




    
    
    
    
    
    
    


    
       今天天气{{info}}
       
       
        a的值是：{{numbers.a}}

（监测到多层数据中的数据变化）

18.监视的简写

//当不需要配置如深度监视和立刻执行的时候可以用简写形式，需要时不可以简写

watch:{
            //  简写形式1
           ishoot(newvalue,oldvalue){
            console.log("ishot被修改了",newvalue,oldvalue)
           }
        }, 
})
      
      
    //   简写形式2
      vm.$watch('ishoot',function(newvalue,oldvalue){
        console.log("ishot被修改了",newvalue,oldvalue)
      })




    
    
    
    
    
    
    


    
       姓：

       名：

       全名:{{fullname}}

19.computed和watch之间的对比

两者之间的区别：
	1.computed能完成的功能，watch都可以完成
	2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
两个重要的小原则
	（1）所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
	（2）所有不被Vue所管理的函数（定时器的回调函数，ajax的回调函数，promise的回调函数），最好写成箭头函数，这样this的指向才是vm或组件实例对象

20.绑定class样式和style样式

绑定样式：
	1.class样式
		写法	：class='xxx',xxx可以是字符串，对象，数组
		字符串写法适用于样式的类名不确定，需要动态指定
		数组写法，适用于：要绑定的样式个数不确定，名字也不确定
		对象写法，适用于：要绑定的样式个数确定，名字也确定，但要动态决定要不要使用
	2.style样式
		:style='xxx',其中xxx是动态值组成的对象
		:style='[a,b]'，其中a,b是样式对象




    
    
    
    
    
    
    
    


    
        
       {{name}}
      

        
      {{name}}
      

      
      {{name}}
        

        
      {{name}}
      

      
      {{name}}

21.条件渲染

条件渲染：
	1.v-if
		写法：
			（1）v-if='表达式'
			（2）v-else-if='表达式'
			（3）v-else='表达式'
		适用于：切换频率较低的场景
		特点：不展示的dom元素直接移除
		注意：v-if可以和v-else-if，v-else一起使用，要求结构不能被打断
		如：
			<h2 v-if='n==1'>h2>
		    <h2 v-else-if='n==2'>h2>
			<h2>打断结构h2>
			<h2 v-else>h2>
		这样的写法是不对的

	2.v-show
		写法：v-show='表达式'
		适用于：切换频率较高的场景
		特点：不展示的Domain元素未被移除，仅仅是使用样式隐藏掉
	3.备注：使用v-if时元素可能无法获取到，而使用v-show一定可以获取到




    
    
    
    
    
    
    
    


    
        
        hello
        world
        
        
        当前的n值为{{n}}
        
        1
        2
        3
        else结构

22.列表渲染

v-for指令
	1.用于展示列表数据
	2.语法：v-for='(item,index) in xxx' :key='yyy'
    3.可遍历，数组，对象，字符串（用的少），指定次数（用到很少）




    
    
    
    
    
    
    
    


    
        
        人员信息（遍历数组）
     
         
             {{p.name}}--{{p.age}}
         
     
     
     
        汽车信息（遍历对象）
        
            
                {{value}}--{{k}}
            
        
        
        
        测试遍历字符串（用的少）
        
            
                {{char}}--{{index}}
            
        
        
        
        遍历指定次数（用到少）
        
            
                {{number}}--{{index}}

23.key的作用和原理

面试题：react，vue中的key有什么作用（key的内部原理）
	1.虚拟DOM中Key的作用
		key是虚拟对象的标识，当数据发生变化时，vue会根据[新数据]生成[新的虚拟DOM]
	随后vue进行[新的虚拟DOM]与[旧的虚拟DOM]的差异比较，比较规则如下：
	2.对比规则：
		（1）旧虚拟DOM中找到了与新虚拟DOM相同的key：
				1、若虚拟DOM中内容没变，直接使用之前的真实DOM
				2、若虚拟DOM中内容变了，则生成新的真实DOM，随后替换页面中之前的真实DOM
		（2）旧虚拟DOM中未找到与新虚拟DOM相同的key
				创建新的真实DOM，随后渲染到页面
	3.用index作为key可能会引发的问题
			1.若对数据进行：逆序添加，逆序删除等跑环顺序操作
				会产生没有必要的真实DOM更新==>界面效果没有问题，但效率低
			2.如果结构中还包括输入类的DOM：
				会产生错误DOM更新===>界面有问题
	4.开发任何选择key?
			1.最好使用每一条数据的唯一标识作为key，比如id,手机号，身份证号，学号等唯一值
			2.如果不存在对数据的逆序添加，逆序删除顺序操作，只用于渲染列表用于展示，使用index作为key是没有问题的

（为什么不写key和使用index作为key会出现数据错位：index错乱）

（为什么使用唯一标识数据不错位）

24.列表过滤




    
    
    
    
    
    
    


    
        人员列表
        
     
         
             {{p.name}}--{{p.age}}--{{p.sex}}

25.列表排序




    
    
    
    
    
    
    


    
        人员列表
        
        
        
        
     
         
             {{p.name}}--{{p.age}}--{{p.sex}}

26.Vue监视数据的原理

1.vue会监视data中所有层次的数据
2.如何监视对象中的数据？
	通过setter实现监视且要在new Vue时就传入要监视的的数据
		（1）对象中后追加的属性，Vue默认不做响应式处理
		（2）如需给后添加的属性做响应式。要用如下的API
			Vue.set(target.propertyName/index,value)或
			vm.$set(target,propertyName/index,value)
3.如何监测数组中的数据
	通过包裹数组更新元素的方法实现，本质就是做了两件事
		（1）调用原生对应的方法对数组进行更新
		（2）重新解析模板，进而更新页面
4.在Vue修改数组中某个元素一定要用如下方法
	（1）使用这些API:push(),pop(),shift(),unshift(),splice(),sort(),reverse()
	 (2)Vue.set()或vm.$set()
	 
特别注意：Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性




    
    
    
    
    
    
    


    
        学生信息
        

        

        

        

        

        

        

        
        姓名：{{student.name}}
        年龄：{{student.age}}
        性别：{{student.sex}}
        爱好:
        
            {{h}}
        
        朋友们：
        
            {{f.name}}--{{f.age}}

27.收集表单数据

收集表单数据
	1.input type=‘text’,则v-model收集的是value值，用户输入的就是value值
	2.input type='radio'，则v-model收集的value值，且要给标签配置value值
	3.input type='checkbox'，那么收集的就是checked
	（1）.没有配置input的value属性，那么收集的就是checked（勾选或未勾选，是布尔值）
	（2）.配置input的value属性
			1.v-model的初始值是非数组，那么收集的就是checked（勾选或未勾选，是布尔值）
			2.v-model的初始值是数组，那么收集的就是value组成的数组
	4.v-model的三个修饰符：
		lazy：失去焦点再收集数据
		number：输入字符串转为有效的数字
		trim：输入首尾空格过滤

28.过滤器

过滤器：
	定义：对要显示的数据进行特定格式化后显示（适用一些简单逻辑的处理）
	语法：
		1.注册过滤器Vue.filter(name,classback)或new Vue(filter:{})
		2.使用过滤器：{{xxx|过滤器名}}或v-bind：属性='xxx|过滤器名'
	备注：
		1.过滤器也可以接受额外参数，多个过滤器也可以串联
		2.并没有改变原理的数据，是产生新的对应属性




    
    
    
    
    
    
    
    


    
        显示格式化后的时间
        
        现在是：{{fmtTime}}
        
        现在是{{getFmtTime()}}
        
        现在是：{{time | timeFormater}}
        
        现在是：{{time | timeFormater('YYYY_MM_DD')|myslice}}
        阿托莉
    
    
        {{name|myslice}}

29.内置指令

前面学过的指令：
	1.v-bind：单向绑定解析表达式，可简写为:xxx
	2.v-model:双向数据绑定
	3.v-for：遍历数组/对象/字符串
	4.v-on：绑定事件监听，可简写为@
	5.v-if：条件渲染（动态控制节点是否存在）
	6.v-else：条件渲染（动态控制节点是否存在）
	7.v-show：条件渲染（动态控制节点是否展示）

1.v-text

v-text指令：
	1.作用：向其所在的节点中渲染文本内容
	2.与插值语法的区别：v-text会替换掉节点中的全部内容，{{xxx}}不会




    
    
    
    
    
    
    


    
      你好，{{name}}
      hello

2.v-html

v-html指令
	1.作用：向指定节点中渲染包含HTML结构的内容
	2.与插值语法的区别：
		（1）v-html会替换节点中所有的内容，{{xx}}则不会
		（2）v-html可以识别HTML结构
	3.严重注意：v-html有安全性问题
		（1）在网站上动态渲染任意HTML是十分危险的，容易导致xss攻击
		（2）一定要在可信的内容上使用v-html，永不要用在用户提交的内容上




    
    
    
    
    
    
    


    
      你好，{{name}}
      hello

v-cloak

v-cloak（没有值）
	1.本质是一个特殊属性，vue实例完毕并接管容器后，会删掉v-cloak属性
	2.使用css配合v-cloak可以解决网速慢时页面显示{{xxx}}的问题




    
    
    
    
    
    
    


    
      你好，{{name}}
      hello

3.v-once

v-once指令：
	1.v-once所在节点在初次动态渲染后，就视为静态内容了
	2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能




    
    
    
    
    
    
    


    
      初始化的n值为{{n}}
      当前的n值为{{n}}

4.v-pre

v-pre指令：
	1.跳过其所在节点的编译
	2.可以利用它跳过：没有使用指令语法，没有使用插值语法的节点，会加快编译




    
    
    
    
    
    
    


    
        v-pre跳过编译
      初始化的n值为{{n}}
      当前的n值为{{n}}

30.自定义指令-函数式和对象式

自定义指令总结：
	一、定义语法：
		(1)局部指令：
			new Vue({
				directives:{指令名：配置对象}
			})
			或
			new Vue({
				directves(){}
			})
		(2)全局指令：
			Vue.directive(指令名，配置对象)或Vue.directive(指令名，回调函数)
	二、配置对象中常用的3个回调：
		（1）bind:指令与元素成功绑定时调用
		（2）inserted:指令所在元素被插入页面时调用
		（3）update:指令所在模板被重新时调用。
	三、备注：
		1.指令定义时不加v-，但使用时要加v-
		2.指令名如果是多个单词，要使用Kebab-case命名方式，不要用camelCase命名




    
    
    
    
    
    
    


    
    
        {{str}}
        当前的n值是：
        放大10倍后的n值是：放大10倍后的n值是：

31.引出生命周期

声明周期：
	1.又名生命周期回调函数，生命周期钩子
	2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
	3.生命周期函数的名字不可更改，但函数的具体内容是程序员更加需求编写的。
	4.生命周期函数中的this指向是vm或组件实例对象

（就算是后面a的值发生改变，模板重新解析，mounted函数也没有再次调用）

32.生命周期

VM的生命周期
	将要创建====>调用beforeCreate函数
	创建完毕====>调用created函数
	将要挂载====>调用beforeMount函数
	（重要）挂载完毕====>调用mounted函数
    将要更新====>调用beforeUpdate函数
   	更新完毕====>调用updated函数
   	（重要）将要销毁====>调用beforeDestroy函数
   	销毁完毕====>调用destroyed函数

常见的生命周期钩子
	1.mounted：发送Ajax请求，启动定时器，绑定自定义事件，订阅消息等[初始化操作]
	2.beforeDestroy：清除定时器，解绑自定义事件，取消订阅消息等[收尾工作]
关于销毁Vue实例
	1.销毁后借助Vue开发中工具看不到任何消息
	2.销毁后自定义事件会失效，但原生DOM事件依然有效
	3.一般不会在beforeDestroy操作数据，因为即使操作数据，也不会在触发更新流程了

（销毁vm实例）

33.组件的理解

34.非单文件组件

Vue中使用组件的三大步骤：
	1.定义组件（创建组件）
	2.注册组件
	3.使用组件（写组件标签）
一、如何定义一个组件？
	使用Vue.extend(options)创建，其中options和New Vue（option）时传入的那个option几乎一样，但也有点区别：
	1.el不要写，为什么？最终所有组件都要经过一个vm的管理，由VM中的el决定服务哪个容器
	2.data必须写出函数，为什么？——————避免组件被复用时，数据存在引用关系
备注：使用template可以配置组件结构

二、如何注册组件
	1.局部注册：靠new Vue的时候传入components选项
	2.全局注册：靠Vue.component('组件名',组件)
三、编写组件标签
	<组件名><组件名/>

35.组件的几个注意点

几个注意点：
	1.关于组件名：
		一个单词组成：
			第一种写法（首字母小写）：school
			第二种写法（首字母大写）：School
		多个单词组成：
			第一种写法（kebab-case）:'my-school',要用引号包裹注册
			第二种写法（CamelCase）:MySchool(需要Vue脚手架支持)
		备注：
			（1）组件名尽可能回避HTML中已有的元素名称
			（2）可以使用name配置项指定组件在开发中工具中呈现的名字
	2.关于组件标签
		第一种写法：
		第二种写法：
		备注：不使用脚手架时，会导致后续组件不能渲染
	3.一个简写方式：
		const school=Vue.extend(options)看简写为：const school=options

36.组件的嵌套

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">
    <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon">
    <title>title>
    <script src="./vue.js">script>
    <style>
    style>
head>
<body>

    <div id="root">
        <app>app>
    div>
    <script>
    const student={
            template:`
                
                {{name}}
                {{age}}    
                
            `,
            data(){
                return{
                    name:'tom',
                    age:18
                }
            }
        }
    const school={
            name:'xuexiao',
            template:`
                
                学校名称：{{schoolName}}
                学校地址：{{address}}
                
                
                
                `,
            data(){
                return{
                    schoolName:'尚硅谷',
                    address:'上海',
            }
            },
            methods: {
                showName(){
                    alert(this.schoolName)
                }
            },
            components:{
                student
            }
        }
    const hello=Vue.extend({
        template:`
            {{msg}}
        `,
        data(){
            return{
                msg:'欢迎来到尚硅谷学习'
            }
        }
    })
    const app=Vue.extend({
        template:`
        
        
        
        
        `,
        components:{
            school:school,
            hello
        }
    })
    const vm= new Vue({
        el:'#root',
        data:{
            msg:'hello!'
        },
        components:{
            app
        }
      })
   script>
body>
html>

37.Vuecomponent

关于VueComponent
	1.school组件本质是应该名为Vuecomponent的构造函数，且不是程序员定义的，是Vue。extend生成的
	2.我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)
	3.特别注意：每次调用Vue.extend,返回的都是一个全新的Vuecomponent
	4.关于this指向：
		（1）组件配置中：
				data函数，methods中的函数,watch中的函数,computed中的函数，它们的this均是[VueComponent实例对象]
		（2）new Vue(options)配置中：
				data函数，methods中的函数,watch中的函数,computed中的函数，它们的this均是[Vue实例对象]
	5.VueComponent的实例对象，以后简称VC（也可以简称为：组件实例对象）

38.Vuecomponent和Vue的内置关系

1.一个重要的内置关系：VueComponent.prototype.__proto===Vue.prototype
2.为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性和方法

39.单文件组件

单文件组件要配合vue脚手架使用

# mian.js文件
import Vue from 'vue'
import App from './app.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

#.vue文件,这个是app.vue

#student.vue文件

#school.vue文件

在vue脚手架文件夹命令行输入npm run serve,运行编译，得到本地服务器地址和局域网地址

40.render函数

关于不同版本的Vue：
	1.vue.js与vue.runtime.xxx.js的区别
		(1)vue.js是完整版的Vue，包含：核心功能+模板解析器
		（2）vue.runtime.xxx.js是运行版的Vue，只包含：核心功能，没有模板解析器
	2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体函数

41.ref属性

ref属性：
	1.被用来给元素或子组件注册引用信息（id的代替者）
	2.应用在HTML标签上获取的是真实dom元素，应用在组件标签上是组件实例对象（vc）
	3.使用方法：
		打标识：
		获取：this.$refs.xxx

42.props配置

配置项props
	功能：让组件接收外部传入过来的数据
（1）传递数据:
	
(2)
	接收数据：
		第一种方式（只接受）
		props['name']
		
		第二种方式（限制类型）
		props:{
			name:String
		}
		第三种方式：（限制类型，限制必要性，指定默认值）
		props:{
			name:{
				type:String,//类型
				required:true//必要性
				default:'张三'//默认值
			}
		}
	备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据

43.mixin混入

mixin(混入)
	功能：可以把多个组件共有的配置提取成一个混入对象
	使用方法：
		第一步：定义混入，例如
		{
		data(){.....},
		method(){.....}
		}
		第二步：使用混入，例如：
		（1）全局混入：Vue.mixin(xxx)
		(2) 局部混入：mixins:[xxx]
	备注：使用混入加入数据时，原有的数据不会改变

//main.js文件
import Vue from 'vue'
import App from './app.vue'
import {hunhe2,mixin} from './components/mixin'
// 关闭Vue的生产提示
Vue.config.productionTip = false
// 全局混合
Vue.mixin(hunhe2)
Vue.mixin(mixin)
new Vue({
  render: h => h(App),
  // template:{App}
}).$mount('#app')

//混合函数mixin.js
export const mixin = {
    methods: {
        showName(){
            alert(this.name)
        }
    },
}
export const hunhe2={
        data() {
            return {
                x:100,
                y:200
            }
        },
    }

//student.vue组件

//school.vue组件

44.插件

插件
	功能：用于增强Vue
	本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的值
	定义插件：
		对象.install=function(Vue,options){
		//1.添加全局过滤器
		Vue.filter(......)
		//2.添加全局指令
		Vue.directive(.....)
		//3.配置全局混入
		Vue.mixin(....)
		//4.添加实例方法
		Vue.prototype.$mymethod=function(){...}
		Vue.prototype.$myProperty=xxxx
		}
	使用插件：Vue.use(插件文件名)

//定义插件
import Vue from "vue"

export default {
    install(){
        Vue.filter('mySlice',function(value){
            return value.slice(0,4)
        }),
        Vue.filter({
            data() {
                    return{
                        x:100,
                        y:200
                    }
            }
        })
}
}

//注册插件
import Vue from 'vue'
import App from './app.vue'
import plugins from './plugins'
// 关闭Vue的生产提示
Vue.config.productionTip = false

// 使用插件
Vue.use(plugins)
new Vue({
  render: h => h(App),
  // template:{App}
}).$mount('#app')

//使用插件

45.scoped

scoped样式
	作用：让同名样式在局部生效，防止冲突
	写法：

//school.vue

//student.vue

(通过给同名加属性实现区分)

46.todolist案例

1.组件化编码流程：
	（1）拆分静态组件：组件要按照功能点拆分，命名不与HTML元素冲突
	 (2)实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用
	 		1.一个组件在用：放在组件自身即可
	 		2.一些组件在用：放在它们共同的父组件上（状态提升）
	 		3.实现交互：从绑定事件开始
2.props适用于
	（1）父组件===>子组件 通信
	（2）子组件===>父组件（要求父先给子一个函数）

3.使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可修改的
4.props传过来的若是对象的值，修改对象中的属性时Vue不会报错，但不推荐

//app.vue

//header.vue

//List.vue

//item.vue

//footer.vue

47.浏览器本地存储

1.存储内容大小一般支持5MB左右
2.浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制
3.相关api:
	(1)
	xxxxxStorage.setItem('key','value');
		该方法接收一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值
	(2)
	xxxxxStorage.getItem('key','value');
		该方法接收一个键名作为参数，返回键名对应的值
	(3)
	xxxxxStorage.removeItem('key','value');
		该方法接收一个键名作为参数，并把该键名从存储中删除
	(4)
	xxxxStorage.clear()
		该方法会清空存储中所有的数据
4.备注
	（1）sessionStorage存储的内容会随着浏览器窗口关闭而消失
	（2）LocalStorage存储的内容，需要手动清除才会消失
	（3）xxxxStorage.getItem(xx)如果xxx对应的value获取不到，那么getItem的返回值是null
	（4）JSON.parse(null)的结果依然是null




    
    
    
    localStorage


    localStorage

（控制浏览器本地存储）




    
    
    
    sessionStorage


    sessionStorage

48.todolist的本地存储

49.组件自定义事件-绑定和解绑

1.一种组件间通信的方式，适用于：子组件===>父组件
2.使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）
3.绑定自定义事件：
	（1）第一张方式，在父组件中：或
	（2）第二种方法，在父组件中：
		
		......
		mounted(){
			this.$ref.xxx.$on('atuguigu',this.test)
		}
	(3)若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法
4.触发自定义事件：this.$emit('atguigu',数据)
5.解绑自定义事件：this.$off('atguigu')
6.组件上也可以绑定原生dom事件，需要使用native修饰符
7.注意：通过this.$ref.组件名.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向vc而不是vm

#app.vue

#school.vue

#student.vue

(组件事件的绑定和解绑，vc实例的销毁)

50.全局事件总线

1.一种组件间通信的方式，适用于任意组件间通信。
2.安装全局事件总线：
new vue({
	...
	beforeCreate(){
	Vue.prototype.$bus=this//安装全局事件总线，$bus就是当前应用的vm
},
})
3.使用事件总线：
	（1）.接收数据：A组件想接收B组件的数据，则在A组件中$bus绑定自定义事件，事件的回调留在A组件自身。
	method(){
		demo(data){......}
	}
	mounted(){
		this.$bus.$on('xxx',this.demo)
	}
	(2).B组件提供数据：
	this.$bus.$emit('xxx',数据)
4.最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件

//main.js
import Vue from 'vue'
import App from './app.vue'
// 关闭Vue的生产提示
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 安装全局事件总线，$bus就是当前应用的vm
  beforeCreate(){
    Vue.prototype.$bus=this
  }
}).$mount('#app')

//app.vue

#school.vue

#student.vue

51.消息的订阅和发布

1.一种组件间通信的方式，适用于任意组件间通信
2.使用步骤：
	（1）安装pubsub:npm i pubsub-js
	（2）引入：import pubsub from 'pubsub-js'
	（3）接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身

	methods(){
	//回调函数
	demo(data){.....}
	}
	mounted(){
	this.pid=pubsub.surscribe('xxx',this.demo)
	}
	（4）B组件提供数据：pubsub.publish('xxx',数据)
	（5）最好在beforeDestroy钩子中，用pubsub.unsubscribe(pid)消除订阅

//main.js
import Vue from 'vue'
import App from './app.vue'
// 关闭Vue的生产提示
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

#app.vue

#school.vue

#student.vue

52.Vue.nextTick

1.语法：this.$nextTick(回调函数)
2.作用：在下一次DOM更新结束后执行其指定的回调
3.什么时候用：当修改数据后，要基于更新后的新dom进行某些操作时，要在nextTick所指定的回调函数中执行

handleEdit(todo){
            if(todo.hasOwnProperty){
                todo.isEdit=true
            }else{
                this.$set(todo,'isEdit',true)
            }
			//会在前面的更新页面
            this.$nextTick(function(){
                this.$refs.inputTitle.focus()
            })
        },

53.动画和过渡

1.作用：在插入，更新或移除DOM元素时，在合适的时候给元素添加样式名

2.写法：

1.准备好样式：

元素进入的样式

（1）v-enter:进入的起点

(2) v-enter-active:进入过程中

(3) v-enter-to:进入的终点

元素离开的元素

（1）v-leave:离开的起点

（2）v-leave-active:离开过程中

（3）v-leave-to:离开的终点

2.使用****包裹要过渡的元素并配置name属性


    你好啊

3.备注：若有多个元素需要过度，则需要使用：,且每一个元素主要指定key值

#app.vue

#anime.vue

54.vue配置代理服务器解决跨域方法一

在配置文件中设置代理服务器的地址

//vue.config.js
module.exports={
  pages:{
    index:{
      // 入口
      entry:'src/main.js',
    },
  },
  lintOnSave:false, //关闭语法检测
  // 开启代理服务器
  devServer:{
    proxy:'http://localhost:8000'
 	//向服务器8000请求，代理服务器本身和vue一样是8080
  }
}

在vue文件中使用axios请求

node服务器文件

//未设置cros
const { response } = require('express');
const express=require('express');
const { request } = require('express');
const app=express();
app.get('/student',(request,response)=>{
    const data={
        name:'tom',
        gender:'male',
        age:18,
    }
    response.send(JSON.stringify(data));
})
app.listen(8000,()=>{
    console.log('服务已经启动，8000端口监听中')
})

问题：代理服务器不是什么问题都向服务器请求的，如果本地拥有与请求同名的资源，会返回本地资源。

55.配置代理方法二

#server1.js
const { response } = require('express');
const express=require('express');
const { request } = require('express');
const app=express();
app.use((request,response,next)=>{
    console.log('有人请求服务器1了');
    console.log("请求的资源是：",request.url);
    next();
})
app.get('/student',(request,response)=>{
    const data={
        name:'tom',
        gender:'male',
        age:18,
    }
    response.send(JSON.stringify(data));
})
app.listen(8000,()=>{
    console.log('服务已经启动，8000端口监听中')
})

#server2.js
const { response } = require('express');
const express=require('express');
const { request } = require('express');
const app=express();
app.use((request,response,next)=>{
    console.log('有人请求服务器2了');
    console.log("请求的资源是：",request.url);
    next();
})
app.get('/car',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    const data={
       name:'宝马',
       piece:100000,
       year:'2020'
    }
    response.send(JSON.stringify(data));
})
app.listen(8001,()=>{
    console.log('服务已经启动，8001端口监听中')
})

#vue.config.js
module.exports={
  pages:{
    index:{
      // 入口
      entry:'src/main.js',
    },
  },
  lintOnSave:false, //关闭语法检测
  // 开启代理服务器(方式2)
  devServer:{
    proxy:{
      '/next':{
        target:"http://localhost:8000",
        pathRewrite:{'^/next':''}//将请求url中的/next替换为空串
      },
      '/demo':{
        target:'http://localhost:8001',
        pathRewrite:{'^/demo':''},
        ws:true,//用于支持websocket
        changeOrigin:true,//用于控制请求头中的host值
      }
    }
  }
}

//app.vue

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Ev69EMB-1656842109122)(C:\Users\刘永杰\AppData\Roaming\Typora\typora-user-images\image-20220419212419956.png)]$

56.vue脚手架配置两种方法总结

方法一：

在vue.config.js中添加如下配置：
devServer:{
	proxy:'协议:路径：目标端口'
	//如：proxy:'http://localhost:5000'
}

说明：
	1.优点：配置简单，请求资源时直接发给前端即可
	2.缺点：不能配置多个代理，不能灵活的控制请求是否走代理
	3.工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

方法二：

在vue.config.js具体配置规则
module.exports={
    devSever:{
        proxy:{
            'api1':{//匹配所有以'api1开头的请求路径'
                target:'协议：路径：目标端口',//代理目标的基础路径
                changeOrgin:true,
                pahRewrite:('^/api1':'')
            },
               'api1':{//匹配所有以‘api2’开头的请求路径
                target:'协议：路径：目标端口',//代理目标的基础路径
                changeOrgin:true,
                pahRewrite:('^/api2':'')
            }  
        }
    }
}
//changeOrigin设置为true，服务器收到的请求头中的host为：服务器相同的host端口
//changeOrigin设置为false时，服务器收到的请求头的host为为发出请求的host端口

说明：
1.优点：可以配置多个代理，且可以灵活的控制代理是否走代理
2.缺点：配置略显繁琐，请求资源时

57.案例：git用户搜索

//app.vue

//gitsearch.vue

//gitList.vue

58.插槽

插槽
1.作用：让父组件可以向子组件指定位置插入HTML结构，也是一种组件间通信的方式，适用于父组件===>子组件
2.分类：默认插槽，具名插槽，作用域插槽
3.使用方式：
	1.
	默认插槽：
	父组件中：
		<子组件名>
			<div>html结构div>
		子组件名>
	子组件中：
	<template>
        <div>
     		
            <slot>插槽默认内容slot>
        div>
	template>
	2.具名插槽
	父组件中：
	<组件名>
        <template slot='name1'>
            <div>html 结构1div>
        template>
        <template slot='name2'>
            <div>html 结构2div>
        template>
     组件名>
	子组件中：
	<template>
        <div>
            <slot name="name1">插槽默认内容1slot>
            <slot name="name2">插槽默认内容2slot>
        div>
	template>
	3.作用域插槽：
		理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（game数据在Category组件中，但使用数据所遍历出来的结构由App决定）
	父组件：
	<category>
		<template scope='scopeDate'>
            h1 v-for="g in scopeData.games" :key='g'>{{g}}h4>
        template>
	category>
	<category>
		<template slot-scope='scopeDate'>
            h4 v-for="g in scopeData.games" :key='g'>{{g}}h4>
        template>
	category>
	子组件：
		<template>
            <div>
            	<slot :games="games">slot>
            div>
		template>
		<script>
			export default{
                name:'category',
                props:'[title]',
                data(){
                    return{
                        games:['红色警戒','cod','ck3','wt']
                    }
                }
            }
		script>

1，2默认插槽，定名插槽

//app.vue

//categoryTest.vue

3.作用域插槽

//app.vue

//categoryTest.vue

59.vuex

概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件通信
什么时候使用Vuex
1. 多个组件依赖于同一状态
2. 来自不同组件的行为需要变更同一状态

2.搭建vuex环境

// 该文件用于创建vuex中最为核心的store
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用Vuex插件
Vue.use(Vuex)
// 创建并暴露store
const store= new Vuex.Store({
    // 准备actions--用于响应组件中的动作
   actions:{
  
},
// 准备mutations--用于to操作数据（state）
   mutations:{
 
},

// 准备state--用于存储数据
state:{
    
},
//准备action--用于异步操作数据  
})
export default store

2.在main.js中创建vm时传入store配置项
....
//引入store
import store from './store'
//创建vm
new Vue({
    el:'#app',
    render:h=>app,
    store
})

2.求和案例vue纯享版

//app.vue

//coutadd.vue

3.求和案例vuex版本

//main.js文件
import Vue from 'vue'
import App from './app.vue'
// 引入store
import store from './store/index'
// 关闭Vue的生产提示
Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus=this
  }
}).$mount('#app')

//store.js文件
// 该文件用于创建vuex中最为核心的store
import Vue from 'vue'
import countOption from './count'
import PersonOption from './person'
// 引入Vuex
import Vuex from 'vuex'
// 使用Vuex插件
Vue.use(Vuex)
// 创建并暴露store
const store= new Vuex.Store({
    modules:{
        countAbout:countOption,
        personAbout:PersonOption
    }
})
export default store

//count.js文件
const countOption={
    namespaced:true,
    actions:{
        jiaOdd:function(context,value){
            console.log('action中的jiaOdd被调用了',value)
            if(context.state.sum%2){
                context.commit('JIA',value)
            }
        },
        jiaWait:function(context,value){
            console.log('action中的jiaWait被调用了',value)
            setTimeout(() => {
                context.commit('JIA',value)
            }, 500);
        },
    },
    mutations:{
        JIA(state,value){
            console.log('mutations中的JIA被调用了',value)
            state.sum+=value
        },
        JIAN(state,value){
            console.log('mutations中的JIAN被调用了',value)
            state.sum-=value
        },
    },
    state:{
        sum:0,//当前的和
        name:'绘梨',
        hobby:'爱看电影的',
    },
    getters:{
        bigSum(state){
            return state.sum*10
        }
    }
}
export default countOption

//person.js
import axios from 'axios'
import { nanoid } from 'nanoid'
const PersonOption={
    namespaced:true,
    actions:{
        add_personWang(context,value){
            if(value.personName.indexOf('王')===0){
                context.commit('add_person',value)
            }else{
                alert('添加的人名不姓王')
            }
        },
        addPersonServer(context){
            axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
                Response=>{
                    context.commit('add_person',{id:nanoid(),personName:Response.data})
                },
                error=>{
                    alert(error.message)
                }
            )
        }
    },
    mutations:{
        add_person(state,value){
            console.log('mutations中的add_person被调用了')
            state.personList.unshift(value)
        }
    },
    state:{
        personList:[
            {id:'001',personName:'电次'}
        ]
    },
    getters:{
        firstPersonName(state){
            return state.personList[0].personName
        }
    }
}
export default PersonOption

(模块化设计)

//app.vue

//countadd.vue

//personadd.vue

4.vuex模块化+命名空间

目的：让代码更加好维护，让多种数据分类更加明确

步骤一：修改store.js

const countAbout={
    namespaced:true,//开启命名空间
    state:{},
    mutation:{},
    action:{},
    getters{}
}
const PersonAbout={
    namespaced:true,//开启命名空间
    state:{},
    mutation:{},
    action:{},
    getters{}
}

const store=new Vuex.store({
    modules:{
        countAbout,
        personAbout
    }
})

开启命名空间后，组件中读取state数据

//方法一，自己直接读取
this.$sstre.state.personAbout.list
//方法二，借助mapState读取
...mapState('countAbout',['sum','name','hobby'])

组件中读取getters数据

//方法一,自己直接读取
this.$store.getters['personAbout/fistPersonName']
//方法二，借助mapGetter读取
...mapGetters('countAbout',['bigSum'])

开启命名空间后，组件中调用dispatch

//自己直接dispath
this.$store.dispath('personAbout/addPersonWang',person)
//借助mapAction
...mapAction('coutnAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

开启命名空间后，组件中调用commit

//自己调用
this.$store.commit('personAbout/add_person',person)
//借助mapMutation
...mapMutation('countAbout',{increment:'JIA'})

60.vue路由

一，路由的理解

什么是路由？

1.一个路由就是一组映射关系（key-value）

2.key为路径，value可能是function或component

路由分类：

1.后端路由：

理解：value是function，用于处理客户端提交的请求
工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

2.前端路由
- 理解：value是component，用于展示页面内容
- 工作过程：当浏览器的路径改变时，对应的组件就会显示

二，vue-router的理解

vue的一个插件库，专门用来实现SPA应用

三，对SPA应用的理解

单页web应用（single page web application ）
整个应用只有一个完整的页面
点击页面的导航链接不会刷新页面，只会做页面的局部更新
数据需要通过Ajax请求获取

四，vue的相关使用

1.安装vue-router,命令：npm i vue_router
2.应用插件：Vue.use(VueRouter)
3.编写router配置项
//引入vueRouter
import VueRouter from 'vue-router'
//引入要显示的组件
import home from '../comonents/home'
//创建router实例对象，去管理一组一组的路由规则
const roter = new VueRouter({
    routes:[
        {
            path:'abouts',
            component:About
        },
        {
        	path:'/home',
            compontent:Home
        }
    ]
})
//暴露router
export default router
4.实现切换（active-class可配置高亮样式）
<router-link acitv-class="active" to="/about">About</router-link>
5.指定展示位置
<router-view><router-view/>

五，Vue路由案例

//router文件夹下的index.js文件
//该文件专门用于创建整个应用的路由器
import VueRouter  from "vue-router"
import homeRouter from '../components/homeRouter'
import AboutRouter from '../components/aboutRouter'

// 创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {
            path:'/about',
            component:AboutRouter
        },
        {
            path:'/home',
            component:homeRouter
        }
    ]
})

//main.js
import Vue from 'vue'
import App from './app.vue'
// 引入store
import store from './store/index'
// 引入VueRouter
import VueRouter from 'vue-router'
// 引入路由器
import router from './router'
// 关闭Vue的生产提示
Vue.config.productionTip = false
// 应用创建
Vue.use(VueRouter)

new Vue({
  store,
  router:router,
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus=this
  }
}).$mount('#app')

//app.vue

//aboutRouter.vue

//homeRouter.vue

六，Vue中几个注意点

路由器显示组件通常存放在page文件夹，一般组件通常存放在component文件夹
通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载
每个组件都有自己的$route属性，里面存储着自己的路由消息
整个应用只有一个router，可以通过组件的$router属性获取到

61.嵌套（多级）路由

1.配置路由规则，使用children配置项：
router:[
	{
		path:'/about',
		component:About,
	},
	{
		path:
		component:Home,
		//通过children配置子路由
		chilren:{
			path:'news',//此处一定不要写：/new
			component:News
		},
		{
			path:'message',//此处一定不要写：/message
			component:Message
		}
	}
]
2.跳转（要写完整路径）
<router-link to="home/news">News<router-link>

//router中的index.js
//该文件专门用于创建整个应用的路由器
import VueRouter  from "vue-router"

import homeRouter from '../page/homeRouter'
import AboutRouter from '../page/aboutRouter'
import News from '../page/NewsRouter'
import Message from '../page/MessageRouter'

// 创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {
            path:'/about',
            component:AboutRouter
        },
        {
            path:'/home',
            // 二级路由
            component:homeRouter,
            children:[
                {
                    path:'news',
                    component:News,
                },
                {
                    path:'message',
                    component:Message,
                }
            ]
        }
    ]
})

//homeRouter.vue

//MessageRouter.vue

//newRouter.vue

62.路由的query参数

1.传递参数
跳转并携带query参数，to的字符串写法
<router-link :to="`/home/message/detail?id={m.id}&title={m.title}`">router-link>
2.接收d参数
<router-link :to="{
                  path:'/home/message/detail',
                  query:{
                  id:666,
                  title:"你好"
                  }
                  }">router-link>

//router的index.js
//该文件专门用于创建整个应用的路由器
import VueRouter  from "vue-router"

import homeRouter from '../page/homeRouter'
import AboutRouter from '../page/aboutRouter'
import News from '../page/NewsRouter'
import Message from '../page/MessageRouter'
import DetailRouter from '../page/DetailRouter';

// 创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {
            path:'/about',
            component:AboutRouter
        },
        {
            path:'/home',
            // 二级路由
            component:homeRouter,
            children:[
                {
                    path:'news',
                    component:News,
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            path:'detail',
                            component:DetailRouter
                        }
                    ]
                }
            ]
        }
    ]
})

//messageRouter.vue

//detail.vue

62.路由的params参数

1.配置路由，声明params参数
{
            path:'/home',
            // 二级路由
            component:homeRouter,
            children:[
                {
                    path:'news',
                    component:News,
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:'xijie',
                            path:'detail/:id/:title',//使用占位符声明接收params参数
                            component:DetailRouter
                        }
                    ]
                }
            ]
        }
2.传递参数
 
<router-link :to="/home/message/detai/666/你好">跳转router-link>

  
<router-link :to="{
                  name:'xijie',
                  params:{
                  id:666,
                  title:'你好'
                  }
                  }">跳转router-link>
3.特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置
4.接收参数:
	$route.params.id
	$route.para

//router的index.js detail相关部分
 {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:'xijie',
                            path:'detail/:id/:title',//node.js的占位符，为params准备
                            component:DetailRouter
                        }
                    ]
 }

//detailRouter.vue

//messageRouter.vue传参部分
 
        
              
            
            
            {{m.title}}

64.命名路由

1.作用：可以简化路由的跳转
2.如何使用
	2.1给路由命名：
   			 {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:'xijie',//给路由命名
                            path:'detail',
                            component:DetailRouter
                        }
                    ]
                }
	2.2简化跳转：
    简化前，需要写完整的路径
    简化后，直接通过名字跳转

未路由命名的跳转
<router-link :to="{
                path:'/home/message/detail',
                query:{
                    id:m.id,
                    title:m.title
                }
            }">
            {{m.title}}
router-link>

路由命名后的跳转
<router-link :to="{
                name:'xijie',
                query:{
                    id:m.id,
                    title:m.title
                }
            }">
            {{m.title}}
 router-link>

65.路由的props配置

作用：让路由组件更方便的收到参数，在index.js中配置
1.第一种写法：props值为对象
2.第二种写法：props值为布尔值，布尔值为true，就把路由器收到的params参数传给组件
3.第三种写法：props值为函数，返回对象每一组key-value都会传给组件

//detailRouter.vue

//router文件夹下的index.js部分
                    children:[
                        {
                            name:'xijie',
                            path:'detail/:id/:title',//使用占位符声明接收params参数
                            component:DetailRouter,
                            // props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给detail
                            // props:{a:1,b:'hello'}

                            
                            // props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传递给detail组件
                            // props:true
                            

                            // props的第三种写法，值为函数
                            props($route){
                                return {id:$route.params.id,title:$route.params.title}
                            }
                        }
                    ]

66.router-link的repalce属性

1.作用：控制路由跳转时操作浏览器历史记录的模式

2.浏览器的历史记录有两种写入模式：分别为replace和push，push是追加历史记录，replace是替换当前记录，路由器跳转时候默认为push

3.如何开启replace模式：

NewS

67.编程式路由导航

1.作用不借助<router-link>实现路由跳转，让路由器跳转更加灵活
2.具体编码
//$router的两个Api
this.$router.push({
    name:'xiangqi',
    params:{
        id:xxx
        title:xxx
    }
})
this.router.repalce({
    name:'xiangqi',
    params:{
        id:xxx,
        title:xxx
    }
})
this.$router.forward(),浏览器跳转前进
this.$router.back()，浏览器跳转后退
this.$router.go(参数：正负数字)，可前进指定步数，也可以后退指定步数

//app.vue

68.缓存路由组件

1.作用:让不展示的路由组件保存挂载，不被销毁
2.具体编码：
	2.1适用于缓存一个路由组件
<keep-alive include='欲保存的组件名'>
    <router-view>router-view>
keep-alive>
	2.2缓存多个路由组件
<keep-alive :include="['News','Message']">

//homeRouter.vue

//NewsROuter.vue

69.路由组件的特有生命周期钩子

1.作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态
2.具体名字：
	2.1 acivated路由组件被激活时触发
	2.2 deactvated路由组件失活时触发
注意：activated()和deactivated()只有所在组件在<keep-alive>keep-alive>包裹的时候才有效；

//NewRouter.vue

70.全局前置–路由守卫

//在router文件夹下的index.js配置
//该文件专门用于创建整个应用的路由器
import VueRouter  from "vue-router"

import homeRouter from '../page/homeRouter'
import AboutRouter from '../page/aboutRouter'
import News from '../page/NewsRouter'
import Message from '../page/MessageRouter'
import DetailRouter from '../page/DetailRouter';

// 创建并暴露一个路由器
const router = new VueRouter({
    routes: [
        {
            name:'guanyu',
            path:'/about',
            component:AboutRouter
        },
        {
            name:'zhuye',
            path:'/home',
            // 二级路由
            component:homeRouter,
            children:[
                {
                    name:'xiaoxi',
                    path:'news',
                    component:News,
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:'xijie',
                            path:'detail/:id/:title',//使用占位符声明接收params参数
                            component:DetailRouter,
                            // props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给detail
                            // props:{a:1,b:'hello'}

                            
                            // props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传递给detail组件
                            // props:true
                            

                            // props的第三种写法，值为函数
                            props($route){
                                return {id:$route.params.id,title:$route.params.title}
                            }
                        }
                    ]
                }
            ]
        }
    ]
})
//全局前置路由守卫--初始化的时候被调用，每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
    console.log(to,from)
    if(to.path==='/home/news'||to.path==='/home/message'){
        if(localStorage.getItem('name')==='tom'){
            next()
        }
        else{
            alert('姓名不对，无权限查看')
        }
    }
    else{
        next()
    }
})

export default router

（前置条件,只有name='tom’的才可以查看message和news）

(姓名为‘tom1’时的效果)

（姓名为‘tom’时的效果）

71.全局后置–路由守卫

//router文件夹中的index配置
//该文件专门用于创建整个应用的路由器
import VueRouter  from "vue-router"

import homeRouter from '../page/homeRouter'
import AboutRouter from '../page/aboutRouter'
import News from '../page/NewsRouter'
import Message from '../page/MessageRouter'
import DetailRouter from '../page/DetailRouter';

// 创建并暴露一个路由器
const router = new VueRouter({
    routes: [
        {
            name:'guanyu',
            path:'/about',
            component:AboutRouter,
            meta:{title:'about'}
        },
        {
            name:'zhuye',
            path:'/home',
            // 二级路由
            component:homeRouter,
            meta:{title:'home'},
            children:[
                {
                    name:'xiaoxi',
                    path:'news',
                    component:News,
                    // 是否需要校验
                    meta:{isAuth:true,title:'news'}
                },
                {
                    path:'message',
                    component:Message,
                    meta:{isAuth:true,title:"message"},
                    children:[
                        {
                            name:'xijie',
                            path:'detail/:id/:title',//使用占位符声明接收params参数
                            component:DetailRouter,
                            meta:{title:'detail'},
                            // props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给detail
                            // props:{a:1,b:'hello'}

                            
                            // props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传递给detail组件
                            // props:true
                            

                            // props的第三种写法，值为函数
                            props($route){
                                return {id:$route.params.id,title:$route.params.title}
                            }
                        }
                    ]
                }
            ]
        }
    ]
})
//全局前置路由守卫--初始化的时候被调用，每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
    console.log(to,from)
    if(to.meta.isAuth){
        if(localStorage.getItem('name')==='tom'){
            next()
        }
        else{
            alert('姓名不对，无权限查看')
        }
    }
    else{
        next()
    }
})

// 全局后置守卫--初始化的时候被调用，每次路由切换之后被调用
router.afterEach((to,from)=>{
    console.log('后置路由守卫',to,from)
    document.title=to.meta.title || '新闻主页'
})
export default router

（页面的title变化）

72.路由守卫总结

1.作用：对路由进行权限控制
2.分类全局守卫，独享守卫，组件内守卫
3.全局守卫
//全局前置守卫，初始化时执行，每次路由器切换前执行
router.beforeEach((to,from,next)=>{
	if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
        if(localStorage.getItem('school'==='atguigu')){//权限控制的具体规则
            next()//放行
        }
        else{
            alert('暂无权限查看')
        }
    }
    else{
        next()//放行
    }
})
//权限后置守卫，初始化时执行，每次路由切换后执行
router.aftereach((to,from)=>{
    if(to.meta.title){
        docment.title=to.mete.title//修改网页的title
    }
    else{
        docment.title='vue_test'
    }
})

73.独享路由守卫

独享守卫(只有前向)
beforeEnter(to,from,next){
    if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
	 if(localStorage.getItem('name')==='tom'){//权限控制的具体规则
                                next()//放行
                            }
                            else{
                                alert('暂无权限查看')
                            }
                        }
                        else{
                            next()//放行
                        }
                    }
}

//router中的index.js
//该文件专门用于创建整个应用的路由器
import VueRouter  from "vue-router"

import homeRouter from '../page/homeRouter'
import AboutRouter from '../page/aboutRouter'
import News from '../page/NewsRouter'
import Message from '../page/MessageRouter'
import DetailRouter from '../page/DetailRouter';

// 创建并暴露一个路由器
const router = new VueRouter({
    routes: [
        {
            name:'guanyu',
            path:'/about',
            component:AboutRouter,
            meta:{title:'about'}
        },
        {
            name:'zhuye',
            path:'/home',
            // 二级路由
            component:homeRouter,
            meta:{title:'home'},
            children:[
                {
                    name:'xiaoxi',
                    path:'news',
                    component:News,
                    meta:{isAuth:true,title:'news'},
                    beforeEnter: (to, from, next) => {
                        //
                        if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
                            if(localStorage.getItem('name')==='tom'){//权限控制的具体规则
                                next()//放行
                            }
                            else{
                                alert('暂无权限查看')
                            }
                        }
                        else{
                            next()//放行
                        }
                    }
                },
                {
                    path:'message',
                    component:Message,
                    meta:{isAuth:true,title:"message"},
                    children:[
                        {
                            name:'xijie',
                            path:'detail/:id/:title',
                            component:DetailRouter,
                            meta:{title:'detail'},              
                            props($route){
                                return {id:$route.params.id,title:$route.params.title}
                            }
                        }
                    ]
                }
            ]
        }
    ]
})
router.afterEach((to,from)=>{
    console.log('后置路由守卫',to,from)
    document.title=to.meta.title || '新闻主页'
})
export default router

(只对news组件进行‘name’检验，不通过就不展示)

74.组件内路由守卫

//进入组件，通过路由规则，进入该组件时被调用
beforeRouterEnter(to,from,next){},
//离开守卫,通过路由规则，离开该组件时被调用
beforeRouterLeave(to,from,next){}

//aboutROuter.vue

(在组件内实现)

75.路由的两种模式

1.对于一个url来说，什么是hash值-----#及其后面的内容就是hash值
2.hash值不会包含在http请求中，即hash值不会给服务器。
3.hash模式:
	3.1地址中永远带着#号，不美观
	3.2若以后将地址通过第三方手机app分析，若app校验严格，则地址会被标记不合法
	3.3兼容性较好
4.history模式
	4.1地址感觉，美观
	4.2兼容性和hash模式相比略差
	4.3应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题

1.采用mode:‘hash’

//vue.config.js
module.exports={
  pages:{
    index:{
      // 入口
      entry:'src/main.js',
    },
  },
  publicPath: './',
  lintOnSave:false, //关闭语法检测
  // 开启代理服务器(方式2)
  devServer:{
    proxy:{
      '/next':{
        target:"http://localhost:8000",
        pathRewrite:{'^/next':''}
      },
      '/demo':{
        target:'http://localhost:8001',
        pathRewrite:{'^/demo':''},
        ws:true,//用于支持websocket
        changeOrigin:true,//用于控制请求头中的host值
      }
    }
  },
}

//router的index.js
//该文件专门用于创建整个应用的路由器
import VueRouter  from "vue-router"

import homeRouter from '../page/homeRouter'
import AboutRouter from '../page/aboutRouter'
import News from '../page/NewsRouter'
import Message from '../page/MessageRouter'
import DetailRouter from '../page/DetailRouter';

// 创建并暴露一个路由器
const router = new VueRouter({
    mode:"hash",
    routes: [
        {
            name:'guanyu',
            path:'/about',
            component:AboutRouter,
            meta:{title:'about',isAuth:true}
        },
        {
            name:'zhuye',
            path:'/home',
            // 二级路由
            component:homeRouter,
            meta:{title:'home'},
            children:[
                {
                    name:'xiaoxi',
                    path:'news',
                    component:News,
                    meta:{isAuth:true,title:'news'},
                },
                {
                    path:'message',
                    component:Message,
                    meta:{isAuth:true,title:"message"},
                    children:[
                        {
                            name:'xijie',
                            path:'detail/:id/:title',
                            component:DetailRouter,
                            meta:{title:'detail'},              
                            props($route){
                                return {id:$route.params.id,title:$route.params.title}
                            }
                        }
                    ]
                }
            ]
        }
    ]
})
export default router

(使用npm run build得到的包)

//服务器server.js
const express=require('express')
const app=express()
app.use(express.static(__dirname+'/static'))
app.get('/person',(req,res)=>{
    res.send({
        name:'Tom',
        age:18
    })
})
app.listen(5005,(err)=>{
    if(!err)
    console.log('服务器启动成功')
})

(上线部署服务的资源)

(可以随意刷新)

2.使用mode:‘histroy’

//vue.config.js
module.exports={
  pages:{
    index:{
      // 入口
      entry:'src/main.js',
    },
  },
  publicPath: './',
  lintOnSave:false, //关闭语法检测
  // 开启代理服务器(方式2)
  devServer:{
    proxy:{
      '/next':{
        target:"http://localhost:8000",
        pathRewrite:{'^/next':''}
      },
      '/demo':{
        target:'http://localhost:8001',
        pathRewrite:{'^/demo':''},
        ws:true,//用于支持websocket
        changeOrigin:true,//用于控制请求头中的host值
      }
    }
  },
}

//router中的index.js
//该文件专门用于创建整个应用的路由器
import VueRouter  from "vue-router"

import homeRouter from '../page/homeRouter'
import AboutRouter from '../page/aboutRouter'
import News from '../page/NewsRouter'
import Message from '../page/MessageRouter'
import DetailRouter from '../page/DetailRouter';

// 创建并暴露一个路由器
const router = new VueRouter({
    mode:"history",
    routes: [
        {
            name:'guanyu',
            path:'/about',
            component:AboutRouter,
            meta:{title:'about',isAuth:true}
        },
        {
            name:'zhuye',
            path:'/home',
            // 二级路由
            component:homeRouter,
            meta:{title:'home'},
            children:[
                {
                    name:'xiaoxi',
                    path:'news',
                    component:News,
                    meta:{isAuth:true,title:'news'},
                },
                {
                    path:'message',
                    component:Message,
                    meta:{isAuth:true,title:"message"},
                    children:[
                        {
                            name:'xijie',
                            path:'detail/:id/:title',
                            component:DetailRouter,
                            meta:{title:'detail'},              
                            props($route){
                                return {id:$route.params.id,title:$route.params.title}
                            }
                        }
                    ]
                }
            ]
        }
    ]
})
export default router

//server.js 需要提前安装npm i connect-history-api-fallback
const express=require('express')
var history = require('connect-history-api-fallback')
const app=express()
app.use(history())
app.use(express.static(__dirname+'/static'))
app.get('/person',(req,res)=>{
    res.send({
        name:'Tom',
        age:18
    })
})
app.listen(5005,(err)=>{
    if(!err)
    console.log('服务器启动成功')
})

（地址栏无‘/#/’）

76.element-ui基本使用

Vue UI组件库
移动端常用组件库
1.Vant
2.Cube UI
3.Mint UI
PC端常用UI组件库
1.Element UI
2.IWiew UI

//main.js
import Vue from 'vue'
import App from './app.vue'
//引入ElementUI组件库
import ElementUI from 'element-ui'
// 映入ElementUI全部样式
import 'element-ui/lib/theme-chalk/index.css'

// 关闭Vue的生产提示
Vue.config.productionTip = false
// 应用ELementUI
Vue.use(ElementUI)
new Vue({
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus=this
  }
}).$mount('#app')

//app.vue

(全部引入版)

77.element-ui按需引入

ui库的变化要查找官方文档来写，并

//main.js
import Vue from 'vue'
import App from './app.vue'

//按需引入
import {Button,Row} from "element-ui"

// 关闭Vue的生产提示
Vue.config.productionTip = false

Vue.component('el-button',Button);
Vue.component('el-row',Row)

new Vue({
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus=this
  }
}).$mount('#app')

//babel.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env",{"modules":false}]
  ],
  plugins:[
    [
      "component",
      {
        "libraryName":'element-ui',
        "styleLibraryName":"theme-chalk"
      }
    ]
  ]
}

//app.vue

你可能感兴趣的:(前端笔记,前端框架,vue.js,html5,css,json)

element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
webpack图片等资源的处理 dmengmeng
需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
docker igotyback eureka 云原生
Docker容器的文件系统是隔离的，但是可以通过挂载卷（Volumes）或绑定挂载（BindMounts）将宿主机的文件系统目录映射到容器内部。要查看Docker容器的映射路径，可以使用以下方法：查看容器配置：使用dockerinspect命令可以查看容器的详细配置信息，包括挂载的卷。例如：bashdockerinspect在输出的JSON格式中，查找"Mounts"部分，这里会列出所有的挂载信息
在Ubuntu中编译含有JSON的文件出现报错芝麻糊76 Linux kill_bug linux ubuntu json
在ubuntu中进行JSON相关学习的时候，我发现了一些小问题，决定与大家进行分享，减少踩坑时候出现不必要的时间耗费截取部分含有JSON部分的代码进行展示char*str="{\"title\":\"JSONExample\",\"author\":{\"name\":\"JohnDoe\",\"age\":35,\"isVerified\":true},\"tags\":[\"json\",\"
Xinference如何注册自定义模型玩人工智能的辣条哥人工智能 AI 大模型 Xinference
环境：Xinference问题描述：Xinference如何注册自定义模型解决方案：1.写个model_config.json，内容如下{"version":1,"context_length":2048,"model_name":"custom-llama-3","model_lang":["en","ch"],"model_ability":["generate","chat"],"model
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
更改npm镜像源为淘宝镜像骆小骆基于node.js
npm常用指令后缀*最近复习了一下node.js整理了一下跟node.js相关的指令后缀*--save、-S参数意思是把模块的版本信息保存到dependencies（生产环境依赖）中，即你的package.json文件的dependencies字段中；–--save-dev、-D参数意思是把模块版本信息保存到devDependencies（开发环境依赖）中，即你的package.json文件的de
COCO 格式的数据集转化为 YOLO 格式的数据集 QYQY77 YOLO python
"""--json_path输入的json文件路径--save_path保存的文件夹名字，默认为当前目录下的labels。"""importosimportjsonfromtqdmimporttqdmimportargparseparser=argparse.ArgumentParser()parser.add_argument('--json_path',default='./instances
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
golang获取用户输入的几种方式余生逆风飞翔 golang 开发语言后端
一、定义结构体typeUserInfostruct{Namestring`json:"name"`Ageint`json:"age"`Addstring`json:"add"`}typeReturnDatastruct{Messagestring`json:"message"`Statusstring`json:"status"`DataUserInfo`json:"data"`}二、get请求的
《HTML 与 CSS—— 响应式设计》陈在天box html css 前端
一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
html+css网页设计旅游网站首页1个页面 html+css+js网页设计 html css 旅游
html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
spring mvc @RequestBody String类型参数 zoyation spring-mvc spring mvc
通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
css设置当字数超过限制后以省略号（...）显示周bro css 前端 vue css3 html 经验分享
1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
h5小游戏定制开发红匣子实力推荐
随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
css2中的透明琪33
.out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
Nginx从入门到实践(三) 听你讲故事啊
动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
Nginx的使用场景：构建高效、可扩展的Web架构张某布响丸辣 nginx 前端架构
Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
Python精选200Tips：121-125 AnFany Python200+Tips python 开发语言
Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
前端CSS面试常见题剑亦未配妥前端面试前端 css 面试
边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
爬虫技术抓取网站数据 Bearjumpingcandy 爬虫
爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文
【前端】vue 报错:The template root requires exactly one element 程序员-张师傅前端前端 vue.js javascript
【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
UI 自动化的页面对象管理神器 PO-Manager TesterHome
原文由alex发表于TesterHome社区网站，点击原文链接可于作者直接交流。做UI自动化的同学都知道，UI自动化一个难点就是页面元素的变化，让自动化维护成为一个痛点。在此，为了减轻这个痛点，我在基于Page-Object模式的基础上开发了页面对象维护的工具。该工具为vscode的一个插件，可以通过vscode插件市场搜索PO-Manager来下载安装本文中的页面对象库文件基于json.一个元素
创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端 ui 服务器
前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
python的request请求401_Python模拟HTTPS请求返回HTTP 401 unauthorized错误 weixin_39599372
Python模拟HTTPS请求返回HTTP401unauthorized错误开始是使用的httplib模块，代码如下：header={"Content-type":"application/json","Accept":"*/*"}params={‘source‘:‘en‘,‘target‘:‘es‘,‘text‘:match.group(1)}data=urllib.urlencode(para
HTML中"bgcolor"与"background-color"的区别 Sardar_ html
bgcolor只是标签属性，而backgroud更多作为css的样式属性。它们俩大多数情况下效果完全相同。但在标签下效果不同。不支持bgcolor属性，只能用style标签添加CSS样式。作为table的属性而言：HelloWorld!和HelloWorld!效果完全相同。作为body属性而言：效果完全相同。不过个人推荐统一用CSS样式进行控制，把style统一放到.css文件中。backgrou
ViewController添加button按钮解析。（翻译）张亚雄 c
<div class="it610-blog-content-contain" style="font-size: 14px"></div>// ViewController.m // Reservation software // // Created by 张亚雄 on 15/6/2.
mongoDB 简单的增删改查开窍的石头 mongodb
在上一篇文章中我们已经讲了mongodb怎么安装和数据库/表的创建。在这里我们讲mongoDB的数据库操作在mongo中对于不存在的表当你用db.表名他会自动统计下边用到的user是表明，db代表的是数据库添加(insert):
log4j配置 0624chenhong log4j
1) 新建java项目 2) 导入jar包，项目右击，properties—java build path—libraries—Add External jar，加入log4j.jar包。 3) 新建一个类com.hand.Log4jTest package com.hand; import org.apache.log4j.Logger; public class
多点触摸(图片缩放为例) 不懂事的小屁孩多点触摸
多点触摸的事件跟单点是大同小异的，上个图片缩放的代码，供大家参考一下 import android.app.Activity; import android.os.Bundle; import android.view.MotionEvent; import android.view.View; import android.view.View.OnTouchListener
有关浏览器窗口宽度高度几个值的解析换个号韩国红果果 JavaScript html
1 元素的 offsetWidth 包括border padding content 整体的宽度。 clientWidth 只包括内容区 padding 不包括border。 clientLeft = offsetWidth -clientWidth 即这个元素border的值 offsetLeft 若无已定位的包裹元素
数据库产品巡礼：IBM DB2概览蓝儿唯美 db2
IBM DB2是一个支持了NoSQL功能的关系数据库管理系统，其包含了对XML，图像存储和Java脚本对象表示（JSON）的支持。DB2可被各种类型的企业使用，它提供了一个数据平台，同时支持事务和分析操作，通过提供持续的数据流来保持事务工作流和分析操作的高效性。 DB2支持的操作系统 DB2可应用于以下三个主要的平台: 工作站，DB2可在Linus、Unix、Windo
java笔记5 a-john java
控制执行流程： 1，true和false 利用条件表达式的真或假来决定执行路径。例：（a==b）。它利用条件操作符“==”来判断a值是否等于b值，返回true或false。java不允许我们将一个数字作为布尔值使用，虽然这在C和C++里是允许的。如果想在布尔测试中使用一个非布尔值，那么首先必须用一个条件表达式将其转化成布尔值，例如if(a!=0)。 2，if-els
Web开发常用手册汇总 aijuans PHP
一门技术，如果没有好的参考手册指导,很难普及大众。这其实就是为什么很多技术，非常好，却得不到普遍运用的原因。正如我们学习一门技术，过程大概是这个样子： ①我们日常工作中，遇到了问题，困难。寻找解决方案，即寻找新的技术； ②为什么要学习这门技术？这门技术是不是很好的解决了我们遇到的难题，困惑。这个问题，非常重要，我们不是为了学习技术而学习技术，而是为了更好的处理我们遇到的问题，才需要学习新的
今天帮助人解决的一个sql问题 asialee sql
今天有个人问了一个问题，如下： type AD value A
意图对象传递数据百合不是茶 android 意图Intent Bundle对象数据的传递
学习意图将数据传递给目标活动; 初学者需要好好研究的 1,将下面的代码添加到main.xml中 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http:/
oracle查询锁表解锁语句 bijian1013 oracle object session kill
一.查询锁定的表如下语句，都可以查询锁定的表语句一： select a.sid, a.serial#, p.spid, c.object_name, b.session_id, b.oracle_username, b.os_user_name from v$process p, v$s
mac osx 10.10 下安装 mysql 5.6 二进制文件［tar.gz］征客丶 mysql osx
场景：在 mac osx 10.10 下安装 mysql 5.6 的二进制文件。环境：mac osx 10.10、mysql 5.6 的二进制文件步骤：[所有目录请从根“/”目录开始取，以免层级弄错导致找不到目录] 1、下载 mysql 5.6 的二进制文件，下载目录下面称之为 mysql5.6SourceDir；下载地址：http://dev.mysql.com/downl
分布式系统与框架 bit1129 分布式
RPC框架 Dubbo 什么是Dubbo Dubbo是一个分布式服务框架，致力于提供高性能和透明化的RPC远程服务调用方案，以及SOA服务治理方案。其核心部分包含: 远程通讯: 提供对多种基于长连接的NIO框架抽象封装，包括多种线程模型，序列化，以及“请求-响应”模式的信息交换方式。集群容错: 提供基于接
那些令人蛋痛的专业术语白糖_ spring Web SSO IOC
spring 【控制反转(IOC)/依赖注入(DI)】：由容器控制程序之间的关系，而非传统实现中，由程序代码直接操控。这也就是所谓“控制反转”的概念所在：控制权由应用代码中转到了外部容器，控制权的转移，是所谓反转。简单的说：对象的创建又容器(比如spring容器)来执行，程序里不直接new对象。 Web 【单点登录(SSO)】：SSO的定义是在多个应用系统中，用户
《给大忙人看的java8》摘抄 braveCS java8
函数式接口：只包含一个抽象方法的接口 lambda表达式：是一段可以传递的代码你最好将一个lambda表达式想象成一个函数，而不是一个对象，并记住它可以被转换为一个函数式接口。事实上，函数式接口的转换是你在Java中使用lambda表达式能做的唯一一件事。方法引用：又是要传递给其他代码的操作已经有实现的方法了，这时可以使
编程之美-计算字符串的相似度 bylijinnan java 算法编程之美
public class StringDistance { /** * 编程之美计算字符串的相似度 * 我们定义一套操作方法来把两个不相同的字符串变得相同，具体的操作方法为： * 1.修改一个字符（如把“a”替换为“b”）; * 2.增加一个字符（如把“abdd”变为“aebdd”）; * 3.删除一个字符（如把“travelling”变为“trav
上传、下载压缩图片 chengxuyuancsdn 下载
/** * * @param uploadImage --本地路径(tomacat路径) * @param serverDir --服务器路径 * @param imageType --文件或图片类型 * 此方法可以上传文件或图片.txt,.jpg,.gif等 */ public void upload(String uploadImage,Str
bellman-ford(贝尔曼-福特)算法 comsci 算法 F#
Bellman-Ford算法(根据发明者 Richard Bellman 和 Lester Ford 命名)是求解单源最短路径问题的一种算法。单源点的最短路径问题是指：给定一个加权有向图G和源点s，对于图G中的任意一点v，求从s到v的最短路径。有时候这种算法也被称为 Moore-Bellman-Ford 算法，因为 Edward F. Moore zu 也为这个算法的发展做出了贡献。与迪科
oracle ASM中ASM_POWER_LIMIT参数 daizj ASM oracle ASM_POWER_LIMIT 磁盘平衡
ASM_POWER_LIMIT 该初始化参数用于指定ASM例程平衡磁盘所用的最大权值，其数值范围为0~11，默认值为1。该初始化参数是动态参数，可以使用ALTER SESSION或ALTER SYSTEM命令进行修改。示例如下： SQL>ALTER SESSION SET Asm_power_limit=2;
高级排序:快速排序 dieslrae 快速排序
public void quickSort(int[] array){ this.quickSort(array, 0, array.length - 1); } public void quickSort(int[] array,int left,int right){ if(right - left <= 0
C语言学习六指针_何谓变量的地址一个指针变量到底占几个字节 dcj3sjt126com C语言
# include <stdio.h> int main(void) { /* 1、一个变量的地址只用第一个字节表示 2、虽然他只使用了第一个字节表示，但是他本身指针变量类型就可以确定出他指向的指针变量占几个字节了 3、他都只存了第一个字节地址，为什么只需要存一个字节的地址，却占了4个字节，虽然只有一个字节，但是这些字节比较多，所以编号就比较大，
phpize使用方法 dcj3sjt126com PHP
phpize是用来扩展php扩展模块的，通过phpize可以建立php的外挂模块,下面介绍一个它的使用方法,需要的朋友可以参考下安装（fastcgi模式）的时候，常常有这样一句命令：代码如下: /usr/local/webserver/php/bin/phpize 一、phpize是干嘛的？ phpize是什么？ phpize是用来扩展php扩展模块的，通过phpi
Java虚拟机学习 - 对象引用强度 shuizhaosi888 JAVA虚拟机
本文原文链接：http://blog.csdn.net/java2000_wl/article/details/8090276 转载请注明出处！无论是通过计数算法判断对象的引用数量，还是通过根搜索算法判断对象引用链是否可达，判定对象是否存活都与“引用”相关。引用主要分为：强引用(Strong Reference)、软引用(Soft Reference)、弱引用(Wea
.NET Framework 3.5 Service Pack 1（完整软件包）下载地址 happyqing .net 下载 framework
Microsoft .NET Framework 3.5 Service Pack 1（完整软件包） http://www.microsoft.com/zh-cn/download/details.aspx?id=25150 Microsoft .NET Framework 3.5 Service Pack 1 是一个累积更新，包含很多基于 .NET Framewo
JAVA定时器的使用 jingjing0907 java timer 线程定时器
1、在应用开发中，经常需要一些周期性的操作，比如每5分钟执行某一操作等。对于这样的操作最方便、高效的实现方式就是使用java.util.Timer工具类。 privatejava.util.Timer timer; timer = newTimer(true); timer.schedule( newjava.util.TimerTask() { public void run()
Webbench 流浪鱼 webbench
首页下载地址 http://home.tiscali.cz/~cz210552/webbench.html Webbench是知名的网站压力测试工具，它是由Lionbridge公司（http://www.lionbridge.com）开发。 Webbench能测试处在相同硬件上，不同服务的性能以及不同硬件上同一个服务的运行状况。webbench的标准测试可以向我们展示服务器的两项内容：每秒钟相
第11章动画效果（中） onestopweb 动画
index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
windows下制作bat启动脚本. sanyecao2314 java cmd 脚本 bat
java -classpath C:\dwjj\commons-dbcp.jar;C:\dwjj\commons-pool.jar;C:\dwjj\log4j-1.2.16.jar;C:\dwjj\poi-3.9-20121203.jar;C:\dwjj\sqljdbc4.jar;C:\dwjj\voucherimp.jar com.citsamex.core.startup.MainStart
Java进行RSA加解密的例子 tomcat_oracle java
加密是保证数据安全的手段之一。加密是将纯文本数据转换为难以理解的密文；解密是将密文转换回纯文本。　　数据的加解密属于密码学的范畴。通常，加密和解密都需要使用一些秘密信息，这些秘密信息叫做密钥，将纯文本转为密文或者转回的时候都要用到这些密钥。　　对称加密指的是发送者和接收者共用同一个密钥的加解密方法。　　非对称加密(又称公钥加密)指的是需要一个私有密钥一个公开密钥，两个不同的密钥的
Android_ViewStub 阿尔萨斯 ViewStub
public final class ViewStub extends View java.lang.Object android.view.View android.view.ViewStub 类摘要： ViewStub 是一个隐藏的，不占用内存空间的视图对象，它可以在运行时延迟加载布局资源文件。当 ViewSt

Vue2学习教程（图文齐全，附带gif动图更加简单易懂）

1.初识vue，hello world

2.模板语法

插值语法

hello: {{name}} 年龄：{{age}} 地址：{{address}}

指令语法

3.数据绑定

4.el与data的两种写法

你好,{{name}}

5.MVVM模型

6.object.defineProperty

7.数据代理

8.Vue中的数据代理

9.事件处理

欢迎来到{{name}}学习

10.事件修饰符

11.键盘事件

12.事件小技巧

13.姓名案例

14.计算属性

15.计算属性的简写

16.监视属性

今天天气{{info}}

17.深度监视

今天天气{{info}}

a的值是：{{numbers.a}}

18.监视的简写

19.computed和watch之间的对比

20.绑定class样式和style样式

21.条件渲染

hello

world

当前的n值为{{n}}

486

艾米莉亚

帕克

22.列表渲染

人员信息（遍历数组）

汽车信息（遍历对象）

测试遍历字符串（用的少）

遍历指定次数（用到少）

23.key的作用和原理

24.列表过滤

人员列表

25.列表排序

人员列表

26.Vue监视数据的原理

学生信息

姓名：{{student.name}}

年龄：{{student.age}}

性别：{{student.sex}}

爱好:

朋友们：

27.收集表单数据

28.过滤器

显示格式化后的时间

现在是：{{fmtTime}}

现在是{{getFmtTime()}}

现在是：{{time | timeFormater}}

现在是：{{time | timeFormater('YYYY_MM_DD')|myslice}}

阿托莉

{{name|myslice}}

29.内置指令

1.v-text

2.v-html

v-cloak

3.v-once

初始化的n值为{{n}}

当前的n值为{{n}}

4.v-pre

v-pre跳过编译

初始化的n值为{{n}}

当前的n值为{{n}}

30.自定义指令-函数式和对象式

{{str}}

当前的n值是：

放大10倍后的n值是：放大10倍后的n值是：

31.引出生命周期

hello

{{str}}

`获取：this.$refs.xxx`