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"orv-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:\Users\root>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中的数据
-
使用场景：发送请求获取数据
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
扫一扫
2898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
