vue-知识点（周总结）

一.vue.js

1.下载Vue2.0的两个版本：

官方网站：Vue.js

• 开发版本：包含完整的警告和调试模式

• 生产版本：删除了警告，进行了压缩

2.指令：

• 解释：指令 (Directives) 是带有 v- 前缀的特殊属性

• 作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

  2-1：v-text 更新DOM对象的 textContent

  <h1 v-text="msg"></h1>

  2-2: v-html 更新DOM对象的 innerHTML

  <h1 v-html="msg"></h1>

  2-3: v-bind

  • 作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

  • 语法：v-bind:title="msg"

  • 简写：:title="msg"

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

2-4: v-on

• 作用：绑定事件

• 语法：v-on:click="say" or v-on:click="say('参数', $event)"

• 简写：@click="say"

• 说明：绑定的事件定义在methods

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

2-5: 事件修饰符

.stop 阻止冒泡，调用 event.stopPropagation()

.prevent 阻止默认行为，调用 event.preventDefault()

.capture 添加事件侦听器时使用事件捕获模式

.self 只当事件在该元素本身（比如不是子元素）触发时，才会触发事件

.once 事件只触发一次

2-6: v-model

• 作用：在表单元素上创建双向数据绑定

• 说明：监听用户的输入事件以更新数据

• 案例：计算器

<input type="text" v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

2-7:v-for 基于源数据多次渲染元素或模板块

<!-- 1 基础用法 -->
<div v-for="item in items">
  {{ item.text }}
</div>
​
<!-- item 为当前项，index 为索引 -->
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>
<!-- item 为值，key 为键，index 为索引 -->
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>
<p v-for="item in 10">{{item}}</p>

3.样式处理-class和style

• 使用方式：v-bind:class="expression" or :class="expression"

• 表达式的类型：字符串、数组、对象（重点）

• 语法：

<!-- 1 -->
<div v-bind:class="{ active: true }"></div> ===> 解析后
<div class="active"></div>
​
<!-- 2 -->
<div :class="['active', 'text-danger']"></div> ===>解析后
<div class="active text-danger"></div>
​
<!-- 3 -->
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>解析后
<div class="active text-danger"></div>
​
​
--- style ---
<!-- 1 -->
<div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>
<!-- 2 将多个 样式对象 应用到一个元素上-->
<!-- baseStyles 和 overridingStyles 都是data中定义的对象 -->
<div v-bind:style="[baseStyles, overridingStyles]"></div>

3-1 v-if和v-show

• 条件渲染

• v-if：根据表达式的值的真假条件，销毁或重建元素

• v-show：根据表达式之真假值，切换元素的 display CSS 属性

<p v-show="isShow">这个元素展示出来了吗？？？</p>
<p v-if="isShow">这个元素，在HTML结构中吗？？？</p>

3-2 提升性能：v-pre

说明：vue会跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<span v-pre>{{ this will not be compiled }}</span>

二：使用vue-cli2脚手架创建项目

2.1安装步骤：

1、安装webpack

npm install webpack webpack-cli -g
​
webpack -v(小写)

2.安装vue-cli

npm install vue-cli -g
​
vue -V(大写的)

3.使用终端切换到工作空间目录

C:Usersroot>cd /d F:自定义盘符及文件夹

4.使用脚手架创建项目

vue init webpack vue-first
​
? Project name vue-first
​
? Project description A Vue.js project
​
? Author Aloys <3264239863@qq.com>  //这里是系统自动识别出个人git邮箱
​
? Vue build standalone
​
? Install vue-router? Yes
​
? Use ESLint to lint your code? Yes
​
? Pick an ESLint preset Standard
​
? Set up unit tests No
​
? Setup e2e tests with Nightwatch? No
​
? Should we run `npm install` for you after the project has been created? (recommended) npm
​

5.启动项目

cd vue-first
​
npm run dev

6.访问项目

在浏览中访问：http://localhost:8080

1)修改ip和port

在config/index.js中
​
dev: {
host: '192.168.102.35', 
​
port: 80,
​
}

7.项目打包

1) 修改build/webpack.prod.conf.js中
​
minify: {
//保留双引号
​
removeAttributeQuotes: false
​
},
​
2) 修改config/index.js中
​
找到 build { assetsPublicPath: '/' }，将其设置为：assetsPublicPath: './ ' 即可。
​
3) 运行npm run build 命令
​
4) 项目多了dist编译后的静态资源目录
​
index.html可以打开或部署服务器

8.项目添加less的支持(版本一定不能高，其它的不要配置)

1)npm install less@3.9.0 --save-dev

2)npm install less-loader@4.1.0 --save-dev

3)在页面中使用

<style scoped lang="less">
​
.hello {
h1 {
color: red;
​
}
​
}
​
</style>

三.使用vue-cli3脚手架创建项目

1、安装@vue/cli脚手架工具

npm install @vue/cli -g

2、查看安装后的vue版本

vue -V(大写)

3、创建项目

vue create vue-20210227

4、选择项目的配置

// 选择一个预设

Please pick a preset:
​
Manually select features

// 选择项目的特征

? Check the features needed for your project:
​
(*) Choose Vue version
​
(*) Babel
​
( ) TypeScript
​
( ) Progressive Web App (PWA) Support
​
(*) Router
​
(*) Vuex
​
(*) CSS Pre-processors
​
(*) Linter / Formatter
​
( ) Unit Testing
​
( ) E2E Testing  

// 选择vue的版本

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)

2.x

3.x (Preview)

// 是否使用history路由

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)--->n

// 选择css预处理器

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):

Sass/SCSS (with dart-sass)

Sass/SCSS (with node-sass)

Less

Stylus

// 选择代码格式化检查工具

? Pick a linter / formatter config:
​
ESLint with error prevention only
​
ESLint + Airbnb config
​
ESLint + Standard config
​
> ESLint + Prettier

// 选择格式化代码的时间

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
​
(*) Lint on save
​
( ) Lint and fix on commit  

// 选择存放配置文件的位置，使用独立的配置

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)

In dedicated config files

In package.json

// 是否保存为模板

? Save this as a preset for future projects? (y/N)  y
​
? Save preset as:temp 

5、切换目录，启动项目

cd vue-20210227
​
npm run serve

6、在地址栏中访问

App running at:

• Local: http://localhost:8080/

• Network: http://192.168.102.4:8080/

7、修改启动端口号

1)在package.json同级别的目录下，创建vue.config.js文件

2)编写以下内容

module.exports = {
//开发服务器的配置
​
devServer: {
host: '127.0.0.1',
​
port: 8888,
​
https: false
​
}
​
}

3)启动后访问 http://127.0.0.1:8888

8、打包项目

1)vue.config.js文件在先配置大包的参数

module.exports = {
runtimeCompiler: true,

//所有资源使用相对路径

publicPath: './',

//打包后资源存放的目录

outputDir: 'dist',

//设置所有标签属性有双引号

chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].title = 'vue-first'
​
args[0].minify = false
​
return args
​
})
​
},
​
devServer: {
host: '127.0.0.1',
​
port: 8888,
​
https: false
​
}
​
}

2)执行打包命令

npm run build

在项目中产生dist文件夹，里面就是打包后静态页面和静态资源

四.过滤器 filter

• 作用：文本数据格式化

• 过滤器可以用在两个地方：{{}}和 v-bind 表达式

• 两种过滤器：1 全局过滤器 2 局部过滤器

1.全局过滤器

• 说明：通过全局方式创建的过滤器，在任何一个vue实例中都可以使用

• 注意：使用全局过滤器的时候，需要先创建全局过滤器，再创建Vue实例

• 显示的内容由过滤器的返回值决定

Vue.filter('filterName', function (value) {
  // value 表示要过滤的内容
})

示例：

<div>{{ dateStr | date }}</div>
<div>{{ dateStr | date('YYYY-MM-DD hh:mm:ss') }}</div>
​
<script>
  Vue.filter('date', function(value, format) {
    // value 要过滤的字符串内容，比如：dateStr
    // format 过滤器的参数，比如：'YYYY-MM-DD hh:mm:ss'
  })
</script>

2.局部过滤器

说明：局部过滤器是在某一个vue实例的内容创建的，只在当前实例中起作用

{
  data: {},
  // 通过 filters 属性创建局部过滤器
  // 注意：此处为 filters
  filters: {
    filterName: function(value, format) {}
  }
}

五.监视数据变化 - watch

1.watch

• 概述：watch是一个对象，键是需要观察的表达式，值是对应回调函数

• 作用：当表达式的值发生变化后，会调用对应的回调函数完成响应的监视操作

• [VUE $watch]

new Vue({
  data: { a: 1, b: { age: 10 } },
  watch: {
    a: function(val, oldVal) {
      // val 表示当前值
      // oldVal 表示旧值
      console.log('当前值为：' + val, '旧值为：' + oldVal)
    },
​
    // 监听对象属性的变化
    b: {
      handler: function (val, oldVal) { /* ... */ },
      // deep : true表示是否监听对象内部属性值的变化 
      deep: true
    },
​
    // 只监视user对象中age属性的变化
    'user.age': function (val, oldVal) {
    },
  }
})

六.计算属性

1.computed

• 注意：computed中的属性不能与data中的属性同名，否则会报错

• [Vue computed属性原理]

var vm = new Vue({
  el: '#app',
  data: {
    firstname: 'jack',
    lastname: 'rose'
  },
  computed: {
    fullname() {
      return this.firstname + '.' + this.lastname
    }
  }
})

七.slot-插槽

具名插槽 和 作用域插槽 引入了一个新的统一的语法 (即v-slot 指令)。它取代了 slot 和 slot-scope

1.内容插槽

定义两个组件 home.vue、test.vue 然后在home.vue组件中引用test.vue组件

插槽内可以包含普通文本

//home.vue
<test>
     Hello Word
</test>
​

//test.vue
<a href="#">
     <slot></slot>
</a>

当组件渲染的时候，<slot></slot>会被替换为Hello Word

插槽内也可以包含任何模板代码，包括HTML

2.插槽内添加其他组件

//home.vue
<test>
    <!-- 添加一个图标的组件 -->
    <font-awesome-icon></font-awesome-icon>
    Hello Word
</test>
​

如果<test>中没有包含一个<slot>元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。

3.在插槽中使用数据

插槽跟模板其他地方一样都可以访问相同的实例属性(也就是相同的"作用域")，而不能访问<test>的作用域

//home.vue
<test>
    //插槽可以获取到home组件里的内容
    Hello {{enhavo}}
</test>
​
data(){
    return{
        enhavo:'word'
    }
}
​

//home.vue
//这里是获取不到name的，因为这个值是传给<test>的
<test name='you'>
    Hello {{name}}
</test>
​

规则： 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

八.生命周期

1.vue生命周期钩子函数

生命周期钩子函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，这些事件，统称为组件的生命周期函数！

注：钩子函数的名称都是Vue中规定好的！

1.1钩子函数 - beforeCreate()

• 说明：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用

• 注意：此时，无法获取 data中的数据、methods中的方法

1.2钩子函数 - created()

• 注意：这是一个常用的生命周期，可以调用methods中的方法、改变data中的数据

• vue实例生命周期 参考1

• vue实例生命周期 参考2

• 使用场景：发送请求获取数据

1.3钩子函数 - beforeMounted()

• 说明：在挂载开始之前被调用

1.4钩子函数 - mounted()

• 说明：此时，vue实例已经挂载到页面中，可以获取到el中的DOM元素，进行DOM操作

1.5钩子函数 - beforeUpdated()

• 说明：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

• 注意：此处获取的数据是更新后的数据，但是获取页面中的DOM元素是更新之前的

1.6钩子函数 - updated()

• 说明：组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作

1.7钩子函数 - beforeDestroy()

• 说明：实例销毁之前调用。在这一步，实例仍然完全可用。

• 使用场景：实例销毁之前，执行清理任务，比如：清除定时器等

1.8钩子函数 - destroyed()

• 说明：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

九.组件通讯

1.父组件到子组件

• 方式：通过子组件props属性来传递数据 props是一个数组

• 注意：属性的值必须在组件中通过props属性显示指定，否则，不会生效

• 说明：传递过来的props属性的用法与data属性的用法相同

<div id="app">
  <!-- 如果需要往子组件总传递父组件data中的数据 需要加v-bind="数据名称" -->
  <hello v-bind:msg="info"></hello>
  <!-- 如果传递的是字面量 那么直接写-->
  <hello my-msg="abc"></hello>
</div>
​
<!-- js -->
<script>
  new Vue({
    el: "#app",
    data : {
      info : 15
    },
    components: {
      hello: {
        // 创建props及其传递过来的属性
        props: ['msg', 'myMsg'],
        template: '<h1>这是 hello 组件，这是消息：{{msg}} --- {{myMsg}}</h1>'
      }
    }
  })
</script>

2.子组件到父组件

方式：父组件给子组件传递一个函数，由子组件调用这个函数

• 说明：借助vue中的自定义事件（v-on:cunstomFn="fn"）

步骤:

• 1、在父组件中定义方法 parentFn

• 2、在子组件 组件引入标签 中绑定自定义事件 v-on:自定义事件名="父组件中的方法" ==> @pfn="parentFn"

• 3、子组件中通过$emit()触发自定义事件事件 this.$emit(pfn,参数列表)

<hello @pfn="parentFn"></hello>
​
<script>
  Vue.component('hello', {
    template: '<button @click="fn">按钮</button>',
    methods: {
      // 子组件：通过$emit调用
      fn() {
        this.$emit('pfn', '这是子组件传递给父组件的数据')
      }
    }
  })
  new Vue({
    methods: {
      // 父组件：提供方法
      parentFn(data) {
        console.log('父组件：', data)
      }
    }
  })
</script>

3.非父子组件通讯

在简单的场景下，可以使用一个空的 Vue 实例作为事件总线。

3.1 $on()：绑定自定义事件

var bus = new Vue()
​
// 在组件 B 绑定自定义事件
bus.$on('id-selected', function (id) {
  // ...
})
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
​

示例：组件A ---> 组件B

<!-- 组件A： -->
<com-a></com-a>
<!-- 组件B： -->
<com-b></com-b>
​
<script>
  // 中间组件
  var bus = new Vue()
  // 通信组件
  var vm = new Vue({
    el: '#app',
    components: {
      comB: {
        template: '<p>组件A告诉我：{{msg}}</p>',
        data() {
          return {
            msg: ''
          }
        },
        created() {
          // 给中间组件绑定自定义事件 注意:如果用到this 需要用箭头函数
          bus.$on('tellComB', (msg) => {
            this.msg = msg
          })
        }
      },
      comA: {
        template: '<button @click="emitFn">告诉B</button>',
        methods: {
          emitFn() {
            // 触发中间组件中的自定义事件
            bus.$emit('tellComB', '土豆土豆我是南瓜')
          }
        }
      }
    }
  })
</script>

十.SPA -单页应用程序

1.路由：

• 路由即：浏览器中的哈希值（# hash）与展示视图内容（template）之间的对应规则

• vue中的路由是：hash 和 component的对应关系

1.1基本使用

安装：npm i -S vue-router

    <div id="app">
      <!-- 5 路由入口 指定跳转到只定入口 -->
      <router-link to="/home">首页</router-link>
      <router-link to="/login">登录</router-link>
    
      <!-- 7 路由出口：用来展示匹配路由视图内容 -->
      <router-view></router-view>
    </div>
    
    <!-- 1 导入 vue.js -->
    <script src="./vue.js"></script>
    <!-- 2 导入 路由文件 -->
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script>
      // 3 创建两个组件
      const Home = Vue.component('home', {
        template: '<h1>这是 Home 组件</h1>'
      })
      const Login = Vue.component('login', {
        template: '<h1>这是 Login 组件</h1>'
      })
    
      // 4 创建路由对象
      const router = new VueRouter({
        routes: [
          // 路径和组件一一对应
          { path: '/home', component: Home },
          { path: '/login', component: Login }
        ]
      })
    
      var vm = new Vue({
        el: '#app',
        // 6 将路由实例挂载到vue实例
        router
      })
    </script>
​

1.2重定向

//  将path 重定向到 redirect
{ path: '/', redirect: '/home' }

2.路由传参

路由传参一般出现场景是，当我们点击某个组件的某个按钮时跳转到另一个组件中，并携带参数，便于第二个组件获取数据。下面我就来说说vue路由传参的三种方式：

2.1通过：冒号的的形式传递传参，页面刷新数据不会丢失

 getDescribe(id) {
//   直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/describe/${id}`,
        })

需要配置的对应路由如下：

{
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }

需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。 切记是用 params 方法来获取，不是用 query 来获取。

2.2通过params的方式，路径不会显示传递的参数。

在第一个组件中，通过路由属性中的name来确定匹配的路由，通过params来传递参数。

this.$router.push({
          name: 'Describe',
          params: {
            id: id
          }
        })
​

2.3通过query的方式也就是 ？的方式路径会显示传递的参数

第一个组件：使用path来匹配路由，然后通过query来传递参数 这种情况下 query传递的参数会显示在url后面?id=？

this.$router.push({
          path: '/describe',
          query: {
            id: id
          }
        })
​

第二个组件:通过query获取参数

this.$route.query.id

最后

以上就是长情冬日最近收集整理的关于vue-12个知识点vue-知识点（周总结）的全部内容，更多相关vue-12个知识点vue-知识点（周总结）内容请搜索靠谱客的其他文章。