本文共 8232 字，大约阅读时间需要 27 分钟。

Vue笔记整理(一)

插值表达式

• 使用v-cloak能够解决差值表达式闪烁的问题

  {
      {msg}}
  

• 使用v-html指令用于输出html代码：

       
  ...data:{message:'
  Hello
  '}

• 默认 v-text是没有闪烁问题的，它会覆盖元素中原本的内容，但是插值表达式只会替换自己，不会把整个元素的内容清空

• v-bind：属性绑定机制 简写是 ：

• v-on： 事件绑定机制 简写是 @,用于监听DOM事件

  注意：在vue中，使用v-on为元素指定处理函数的时候，如果加了小括号，就可以给函数传参

事件修饰符

• .stop 阻止冒泡

• .prevent 阻止默认事件

• .capture 添加事件监听器时使用事件捕获机制（即不按照冒泡的顺序捕获而是按先后顺序捕获）

• .self 只当事件在该元素本身触发时，才会触发事件处理函数

• .once 事件只触发一次

• 这些修饰符可以串联使用

  @click.stop = "msg"

Vue中的样式

使用class样式

1. 数组

   Hello

2. 数组中使用三元表达式

   Hello
   //	data对象中先定义一个：   iscctive:true

3. 数组中使用嵌套对象

   Hello
   //	data对象中先定义一个：   iscctive:true

4. 直接使用对象

   • 方法一：

   Hello

   • 方法二：

   Hello
   ...data:{	classObj : { red:true , italic:true , active:true , thin:true }}

使用内联样式

1. 直接在元素上通过style的形式，书写样式对象

   Hello

2. 将样式对象，定义到data中，并直接引用到:style中

   • 在data上定义样式：

     data:{	h1StyleObj: { color:'red' , 'font-size': '20px' , 'font-weight' : '200' }}

   • 在元素中，通过属性绑定的形式，将样式应用到元素中：

     Hello

3. 在:style中通过数组，引用多个 data上的样式对象

   • 在data上定义形式

     data:{	h1StyleObj:{ color: 'red' , 'font-size' : '20px' , 'font-weight' : '200'},	h1StyleObj2:{ fontStyle: 'italic'}}

   • 在元素中，通过属性绑定的形式，将样式对象应用到元素中：

     Hello

v-for和key属性

1. 迭代数组

        
       
         
   {
       {site.name}}
        
   ...data:{	sites:[		{ name: 'Runnoob'},		{ name:'Google'},		{ name:'Taobao'}	]}

   注意：i 可以省略不写

2. 迭代对象的属性

        
         值是：{
       {value}}---键是：{
       {key}}---索引是：{
       {index}}
        
   ...data:{    user:{        id:1,        name:'guo',        gender:'nan'    }}

3. 迭代数字

       这是第{
       { i }}个p标签
   

   • 注意：如果使用 v-for 迭代数字的话，i 的值是从1开始的
   • 注意：v-for循环的时候，key属性只能使用number获取string
   • key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值
   • 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，碧玺在使用v-for的同时，指定唯一的字符串或数字类型：key值

v-if和v-show的使用

• v-if的特点是：每次都会重新删除或创建元素

• 有较高的切换性能消耗

• 如果元素可能永远是也不会被显示出来呗用户看到，则推荐使用v-if

• v-if之后可以跟v-else-if和v-else

       
        a
       
       
        b
       
       
        not a/b
       

  这是v-if控制的元素
  ...data:{	flag:true}

• v-show的特点是：每次不会重新进行DOM的删除和创建操作，只是切换了元素的display：none样式

• 有较高的初始渲染消耗

• 如果元素涉及到频繁的切换，最好使用v-show

  这是用v-show控制的元素
  ...data:{	flag:true}

计算属性（computed）

   
    
    
{
  {fullName}}
   

• 可以使用methods代替computed，效果上一样，但是computed是基于它的依赖缓存，只有相关依赖发生改变是才会重新取值，而使用methods在重新渲染时，函数总会重新调用执行
• 在开发中，更多使用的是computed
• 计算属性一般不写set方法

v-model的使用

结合radio类型

      男              女        
{
  {sex}}
data:{	sex: '男'}

• 当v-model绑定同一个数据时，name属性不需要写，也可以设置单选按钮
• sex里面写上数据时，由于双向绑定，对应的按钮处也会有选中效果，这样可以解决单选按钮的默认问题

结合checkbox类型

      同意协议        
{
  {isAgree}}
    下一步data: {	isAgree: false       //单选框对应的是boolean值}

篮球    乒乓球    足球    
爱好是{
  {hobbies}}
data: {	hobbies: [ ]                //多选框对应的是数组}

结合select类型

      苹果      香蕉      葡萄        
选择的是:{
  {fruit}}
data: {	fruit: '香蕉'}

• 注意：select的v-model是写在select中的，而不是写在option中
• 默认选中的是香蕉

    苹果    香蕉    葡萄data: {	fruits: '香蕉'}

• multiple可以设置为多选框

值绑定

我们前面的value中的值，都是定义在input时直接给定，但是在实际开发中，这些input的值可能是定义在data中的，所以需要通过v-bind：value动态地给value绑定值

      {
  {item}}        
选择的是:{
  {hobbies}}
data: {	hobbies: [ ],	allHobbies: ['篮球', '足球', '乒乓球', '羽毛球']}

修饰符的使用

1. lazy修饰符

   • 默认情况v-model是实时同步输入框的数据的
   • lazy修饰符可以让数据在失去焦点或回车时才更新

   v-model.lazy ="message"

2. number修饰符

   • 默认情况下，在输入框中无论输入的是字母还是数字，都会被当做String类型处理
   • 但是如果我们希望处理的是数组类型，那么最好直接将内容当做数字处理

   v-model.number ="message"

3. trim修饰符

   • 如果输入的内容首尾有很多空格，可以使用trim修饰符去除

   v-model.trim ="message"

组件化开发

基本使用

使用步骤：

1. 调用Vue.extend()方法创建组件构造器
2. 调用Vue.component()方法注册组件
3. 在Vue实例的作用范围内使用组件

• Vue.extend():
  • 创建一个组件构造器
  • 传入的template代表自定义组件的模板，该模板里面是HTML代码
• Vue.component()：
  • 注册组件，需要传递两个参数：1.注册组件的标签名 2.组件构造器

全局组件和局部组件

• 上一节的代码即为全局组件的应用

• 局部组件：

父组件和子组件

组件的语法糖注册

1. 全局组件

2. 局部组件

组件的分离写法

组件的data数据存放

• 组件对象的data属性必须是一个函数

父子组件通信

1. 父–> 子 （props）

   • props如果使用的是驼峰法命名，则用的时候必须以 - 连接
     • 例如：cInfo --> c-info

2. 子–>父

   • 需要自定义事件完成子级向父级传递
   • 自定义事件流程：
     • 在子组件中，通过$emit()来触发事件
     • 在父组件中，通过v-on来监听子组件事件

父子组件的访问

1. 父组件访问子组件：使用$children

   ​ 或者使用$refs

2. 子组件访问父组件：使用$parent

slot插槽

1. 最好的封装方式是将共性放到组件中，将不同的显示为插槽
   • 一旦预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容

   
    
    
     按钮
        
    
     HELLO
        
      
   
    
   

2. 插槽也有默认值：这个默认值用户可以自己填写

   • 例如：

            
             按钮
            

3. 具名插槽

        
       
         
          标题
             
         
          按钮
             
           
        
       
        

4. 作用域插槽：

   • 父组件替换插槽的标签，但是内容由子组件来提供

前端模块化

1. 在Html文件中引入js文件

   • type类型必须设置成module，这样写可以使每一个js文件都是一个单独的文件，相互之间没有干扰

2. 要想在bbb.js文件引用另一个aaa.js文件里面的变量、方法、函数或者类，

   则需要先将aaa.js文件导出(export)

   //方法一：export  let  name = "guo"//方法二：let  name = "guo"export  {	name}

   然后在bbb.js文件中导入需要的东西

   import  { name }  from  "./aaa.js";

3. 同理：类和函数都可以使用这种方法

4. 如果希望某个模块的所有信息都导入，一个个导入显然很麻烦，则可以通过 * 导入模块中所有的export变量

   • 但是通常情况下，我们需要给 * 起一个别名，方便以后的使用

     import  *  as   aaa   from  './aaa.js'

Webpack

1. webpack在打包一个文件时，会自动识别是否依赖其他文件，若依赖有，则自动处理那个文件

2. webpack主要用于处理用户写的js代码，并且webpack会自动处理js之间相关的依赖，但是在开发中我们不仅仅有基本的js代码处理，还需要加载css、图片等等，对于webpack本身来说，这些转化是不支持的。

   则需要给webpack扩展对应的loader

3. loader的使用过程：

   • 步骤一：通过npm安装需要使用的loader
   • 步骤二：在webpack.config.js中的modules关键字下进行配置

4. css-loader 解析css文件后，使用import加载，并且返回css代码

   npm  install  --save-dev  css-loader

5. style-loader 将模块的导出作为样式添加到DOM中

   npm  install  style-loader  --save-dev

6. webpack在打包js文件时，ES6语法并没有转成ES5，那么久意味着一些对ES6不支持的浏览器没办法运行程序。

   如果希望将ES6语法转成ES5，需要使用babel

   npm  install  --save-dev  babel-loader@  7bable-core  babel-preset-es2015

7. webpack引入vue.js

   npm  install  vue  --save

8. el和template的区别

   • 在实际开发中，并不希望修改Html模板的代码，可以使用template属性

     new Vue({  el: '#app',  template: `    
            
                   {
           {message}}    
            
         `,  data: {}})

   • 上面的template属性中的代码可以代替Html中的

            
         
             
     {
           {message}}
       
            

9. plugin是插件的意思，通常是用于对某个现有的架构进行扩展

   • loader和plugin的区别
     • loader主要是用于转换某些类型的模块，它是一个转换器
     • plugin是插件，它是对webpack本身的扩展，是一个扩展器
   • 使用步骤：
     • 步骤一：通过npm安装需要使用的plugins
     • 步骤二：在webpack.config.js中的plugins中配置插件

Vue CLI

1. 安装Vue脚手架

   npm install @vue/cli -g

2. Vue CLI2初始化项目

   vue  init  webpack  (项目名称)

3. Vue CLI3初始化项目

   vue  create  (项目名称)

4. 脚手架3修改配置的方法：

   • 启动配置服务器：

     vue  ui

   • 在当前的目录下创建一个文件，名叫vue.config.js，然后在下面的代码内输入配置

     module.exprots = {}

路由

基本内容

1. 定义：路由就是通过互联的网络把信息从源地址传输到目的地址的活动

2. 路由提供了两种机制：路由和转送

   • 路由是决定数据包从来源到目的地的路径
   • 转送将输入端的数据转移到合适的输出端

3. 使用vue-router的步骤

   • 一、创建路由组件
   • 二、配置路由映射：组件和路径映射关系
   • 三、使用路由：通过和

4. < router-link >标签是一个vue-router中已经内置的组件，它会被渲染成一个< a >标签。

   < router-view >标签会根据当前的路径，动态渲染除不同的组件。

   在路由切换时，切换的是< router-view >挂载的组件，其他内容不会发生改变。

5. 设置路由的默认路径

   const routes = [	{		path: ''，		redirect: '/home'     //这里可以修改成想要的默认首页	}]

前后端渲染和路由

1. 后端渲染

   jsp: java server page

2. 后端路由

   当我们的页面中需要请求不同的路径内容时，交给服务器来处理，被处理url（网址路径）和页面之间的映射关系

3. 前后端分离阶段：

   • 随着Ajax的出现，有了前后端分离的开发模式
   • 后端只提供API来返回数据，前端通过Ajax获取数据，并通过JS渲染网页
   • 这样做最大的优点是前后端责任的清晰，后端专注于数据，前端专注于交互和可视化
   • 并且当移动端出现后，后端不需要进行任何处理，依然使用之前的一套API即可

4. 单页面富应用阶段（SPA）

   • 整个网页只有一个html页面

   • 最主要的特点是在前后端分离的基础上加了一层前端路由

5. 前端路由的核心

   改变url，但是页面不进行整体的刷新

改变URL

1. URL的hash

   • URL的hash也就是锚点（#），本质上是改变window.location的href属性
   • 可以在控制台通过直接赋值location.hash来改变href，但是页面没有发生刷新

2. 在控制台输入history.pushState({}, ‘’, ‘home’)可以不刷新页面的情况下改变URL，而且可以返回之前的页面

3. 在控制台输入history.replaceState({}, ‘’, ‘home’)和第二点的作用相同，不同的是此页面不能返回

4. history.back()将浏览器界面后退

   history.forward()将浏览器界面前进

5. history(-1)等价于history.back()

   history(1)等价于history.forward()

router-link的属性

1. to属性用于指定跳转的路径

2. tag属性可以指定之后渲染成什么组件

   上面的代码会被渲染成一个< li >元素，而不是< a >

3. replace属性不会留下history记录，所以指定replace的情况下，后退键不能返回到上一个页面中

4. 设置active-class可以修改默认的名称

   • 在进行高亮显示的导航菜单或者底部tabbar时，会使用到该类
   • 但是通常不会修改类的属性，会直接使用默认的router-link-active即可

< router-link >标签最终会渲染成一个< a >标签

通过代码跳转路由

在App.vue中：

   methods: {	homeClick() {		this.$router.replace('/home')		//this.$router.push('/home')	},	aboutClick() {		this.$router.replace('/about')		//this.$router.push('/about')	}}

路由的懒加载

1. 路由中通常会定义很多不同的页面，而这些页面最后会放在一个js文件中，造成这个页面非常大，要想避免这种情况，使用路由的懒加载即可。

2. 路由的懒加载的主要作用就是将路由对应的组件打包成一个个js代码块，只有这个路由被访问到时，才加载对应的组件。

3. 方式：

   const Home = () => import('../components/Home.vue')

嵌套路由

实现嵌套路由的步骤：

1. 创建对应的子组件，并且在路由映射中配置对应的子路由
2. 在组件内部使用< router-view >标签

参数传递

1. 传递参数主要有两种类型：params和query
   • parames的类型：
     • 配置路由格式：/router/:id
     • 传递的方式：在path后面跟上对应的值
     • 传递后形成的路径：/router/123, /router/abc
   • query的类型：
     • 配置路由格式：/router,也就是普通配置
     • 传递方式：对象中使用query的key作为传递方式
     • 传递后形成的路径：/router?id=123, /router?id=abc

转载地址：https://blog.csdn.net/weixin_45877762/article/details/118209042 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！