vue 添加自定义属性不依赖data数据_Vue学习知识点总结

Vue学习知识点总结

Vue讲解

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，Vue 也完全能够为复杂的单页应用提供驱动。有些知识点Vue官网讲解的不是很清晰，所以我就写了一些小的demo；但是官网上有些知识点这里是没有讲解到的，大神请坐高铁走！小白每天抽空看一遍，不会也会了！

案例地址:https://github.com/pengjunshan/WebPJS/Vue

其它Web文章

CSS浮动的使用和解决浮动的五种方法

CSS定位relative、absolute、fixed使用总结

原生开发WebApi知识点总结

开发中常用jQuery知识点总结

C3动画+H5+Flex布局使用总结

ES6常用知识总结

开发环境到生产环境配置webpack

待续......本编文章会讲到的知识点

• Vue基础使用
• vue的使用
• Mustache表达式使用
• 指令v-使用
• 动态添加数据到data、异步更新DOM
• filter过滤器
• watch监听配置项
• computed计算属性配置项
• 事件修饰符
• 键值修饰符
• vue声明周期钩子函数
• 自定义指令
• 小案例
• vue组件
• 全局组件
• 局部组件
• 父组件传递子组件数据
• 子组件传递父组件数据
• 非父子组件传递数据
• 组件中插槽使用
• vue中ref使用
• vue-router路由
• 路由基本使用
• 重定向、高亮
• 路由传参方式
• 路由嵌套-子路由
• vuex
• State
• Mutation
• Action
• Getter

Vue基础使用

1.vue的使用

下载Vue：npm i vue

1. 首先下载vue，引入vue.js
2. js中创建一个Vue对象实例
3. 通过el指定vue管理页面的边界

{ {message}}

指令v-使用

指令 (Directives) 是带有 v- 前缀的特殊属性，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

1.v-text

用来设置当前元素的文本内容，相当于DOM对象的 innerText或textContent

2.v-html

更新DOM对象的 innerHTML

3.v-bind

通过v-bind为HTML元素绑定属性，使用data中提供的数据;

因为 v-bind:title 这种使用方式很繁琐，所以，vue提供了一个简化语法 :title

4.v-on

绑定事件,支持js所有的事件类型， v-on绑定的事件方法都要写在Vue实例中的methods对象中;

v-on:省略写 @

点我

点我

5.v-model

在表单元素上创建双向数据绑定;

只能用在表单元素中，注意：不同的表达元素，v-model的表现可能会有所不同。

比如：v-model操作文本框的value属性，而复选框 v-model 就是操作其选中状态;

6.v-for

基于源数据多次渲染元素或模板块,不仅可以渲染集合List也可以遍历对象Obj；

• 姓名：{ {item.name}} -- 年龄：{ {item.age}}

• 姓名：{ {item.name}} -- 年龄：{ {item.age}} -- 下标：{ {index}}

• key={ {key}} -- value={ {value}} -- index={ {index}}

7.v-bind:class和v-bind:style

表达式的类型：字符串、数组、对象(重点)

中国惊奇先生

斗罗大陆

不良人

8.v-if

根据表达式布尔值的真假条件是否加载这段代码， true:DOM中会加载这段代码，false:DOM中不会加载这段代码；

我是v-if,是否会加载我

9.v-show

根据表达式之真假值，切换元素的 display CSS 属性，无论true还是false DOM中都会加载这段代码；

我是v-show，是否会显示出来

10.v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指