{{messaeg}}
v-text和差值表达式的区别:“v-text”会覆盖标签里的内容,v-text默认不会出现顿闪,{{}}差值表达式要v-clock [v-clock]{
dispaly:none
}
v-html 解析data里的标签
input的title属性:鼠标放上去展示的文字消息
value:值
type:类型
绑定属性:v-bind
v-bind会中可以写合法的js表达式子
简写的形式:一个:冒号
v-on事件的指令
简写@
methods:{
//中间写方法
}
跑马灯效果
1,基本结构
2,绑定事件
3,截取字符串
4,开启定时器
5,赋值
箭头函数this指向外部的this
事件修饰符
vue会监听data中的数据,数据只要一更新就会渲染
默认冒泡
事件冒泡机制
父盒子包裹子盒子,同时注册点击事件,先触发子盒子再父盒子的
阻止冒泡修饰符.stop
给子盒子添加事件修饰符阻止向外冒泡,就是只触发子盒子的事件
阻止默认行为
比如a标签的默认行为就是跳转href
prevent修饰符就阻止了默认行为
捕获机制从外到里
给父盒子添加修饰符capture 先执行父盒子再执行子盒子的事件
和冒泡相反
.self修饰符,只当事件在自身上点击时触发
冒泡是被动触发,从内到外,给父盒子添加.self修饰符 只在自身上点击触发,冒泡或者捕获不应触发
once修饰符 只触发一次
[图片上传中...(image.png-777cca-1562595465280-0)]
第一次阻止了,第二次没阻止,所以只阻止一次
.stop和.self的区别
.stop 阻止所有的元素
.self只是self自己的那个元素,其他元素的不阻止
有一点点点像break和return
v-model双向数据绑定
表单独有的
input select textarea
简易的计算器
简单的eval()解析
:class
vue中的样式
1, 先定义3个style样式
一个激活的样式
letter-spacing:中文间隔
word-spaning:英文间隔
数组中使用三元表达式
对象的形式
直接使 用对象
绑定内联style
[图片上传中...(image.png-3f7312-1562598047133-0)]
如果属性包含- 添加引号
v-for 循环迭代遍历
[图片上传失败...(image-8d6d58-1562598680479)]
键,值,索引
v-for迭代数字
数组中追加
[图片上传中...(image.png-c82646-1562599514882-0)]
key用字符串或者number
总结:
http://www.liulongbin.top:3005
2,搜索
直接return
过滤器
过滤器的简单使用
正则替换
过滤器传参
过滤器传多个参数
过滤器的多次调用
从左往右依次处理
全局时间过滤器
年月日时分秒过滤器
形参的模拟值es6
私有的过滤器
名称一致优先调用私有的过滤器
字符串填充
按键修饰符
按键修饰符的键盘码值
自定义全局按键修饰符
自定义指令
全局组件
https://blog.csdn.net/qq_40141204/article/details/82980116
https://blog.csdn.net/runOnWay/article/details/78998631
css样式相关的可以写在bind中
钩子函数参数
私有指令
简写形式
vue实例的生命周期
vue-resource
node.js服务器
客户端写方法
品牌的数据列表
vue-resource
https://www.npmjs.com/package/vue-resource
https://github.com/pagekit/vue-resource/blob/HEAD/docs/config.md
vue的动画
进入和离开的动画
自定义的动画样式名字
进场动画和立场的动画
放到元素的身上
【props】
入场的动画和立场的动画
hello
动画css
[https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-%E9%92%A9%E5%AD%90](https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-%E9%92%A9%E5%AD%90)
进入前和进入后
入场效果一进场就有动画
tag属性指定元素标签
vue的组件化
### [Vue.extend( options )](https://cn.vuejs.org/v2/api/#Vue-extend "Vue.extend( options )")
* **参数**:
* `{Object} options`
* **用法**:
使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。
`data` 选项是特例,需要注意 - 在 `Vue.extend()` 中它必须是函数
```
```
```
// 创建构造器
var Profile = Vue.extend({
template: '{{firstName}} {{lastName}} aka {{alias}}
',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 创建 Profile 实例,并挂载到一个元素上。
new Profile().$mount('#mount-point')
```
结果如下:
```
Walter White aka Heisenberg
```
组件注册
官网
https://cn.vuejs.org/v2/guide/components-registration.html
第三种方法
私有组件
组件中的data必须是一个函数,并且return出来一个
为什么要加return的
通过return创建一个新的对象,不共享
组件的切换
组件切换的第二种方式
父子组件的传值方式
父组件到子组件传递方法
子组件$emit触发父组件传递的自定义方法
子组件, 向父组件传参,传值
发表评论
this.$ref获取元素
修改路由高亮的类名
路由的标签添加一个动画
路由this.$route对象
查询字符串传参
路由解析
命名视图
侦听器
监听路由的改变
计算属性
nrm的使用
搭建项目工程,搭建文件结构
npm init -y初始化
webpack的安装和使用
1,npm i webpack -g全局安装
2,npm i webpack -S安装到项目依赖
安装3.6.0的版本 不安装4.0的
npm install [email protected] -g 全局安装
npm install [email protected] -S
如果安装了4.0直接卸载
npm uninstall webpack -g 全局安装
npm uninstall webpack -S
安装npm i webpack-dev-server -D
报错就安装低版本的,版本兼容导致的错误
npm i -D [email protected]
配置热更新
https://www.jianshu.com/p/fc2df1ceb8e7
页面保存到内存
安装插件
cnpm i html-webpack-plugin -D
const path = require('path');
// 3.6版本热更新的第一步
const webpack = require('webpack')
// "dev2": "webpack-dev-server --open --port 3000 --contentBase src --hot",
// 导入在内存生成html页面的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// npm init -y
// npm i webpack-dev-server -D
module.exports = {
// 3.6版本的写法
// 入口
entry: path.join(__dirname, './src/main.js'), //打包文件的入口,要打包哪些文件
// 出口
output: {
path: path.join(__dirname, './dist'), //打包后的文件输出路径
filename: "bundle.js" //输出文件的名称
},
//开发服务配置
devServer: {
proxy: { // proxy URLs to backend development server
// '/api': 'http://localhost:3000'
}, //代理
open: true, //自动打开浏览器
port: 3000, //设置端口
contentBase: path.join(__dirname, 'src'), // boolean | string | array, static file location 打开的根路径
// 3.6版本热更新的第二步
hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin 热更新
compress: true, // enable gzip compression 开启gzip压缩
historyApiFallback: true, // true for index.html upon 404, object for multiple paths
https: false, // true for self-signed, object for cert authority
noInfo: true, // only errors & warns on hot reload
// ...
},
// 插件的配置
plugins: [
// 3.6版本热更新的第三步
// 配置热更新的节点
new webpack.HotModuleReplacementPlugin(), //new一个热更新的模块对象
// 插件
new HtmlWebpackPlugin({
title: 'Hello World app', //html文件的标题
// minify 的作用是对 html 文件进行压缩
minify: { // 压缩HTML文件
//是否对大小写敏感,默认false
caseSensitive: true,
//是否简写boolean格式的属性如:disabled="disabled" 简写为disabled 默认false
collapseBooleanAttributes: true,
//是否去除空格 删除空白符与换行符,默认false
collapseWhitespace: true,
//是否压缩html里的css(使用clean-css进行的压缩) 默认值false;
minifyCSS: true,
//是否压缩html里的js(使用uglify-js进行的压缩)
minifyJS:true,
//Prevents the escaping of the values of attributes
preventAttributesEscaping: true,
//是否移除属性的引号 默认false
removeAttributeQuotes: true,
//是否移除html注释 默认false
removeComments: true,
//从脚本和样式删除的注释 默认false
removeCommentsFromCDATA: true,
//是否删除空属性,默认false
removeEmptyAttributes: true,
// 若开启此项,生成的html中没有 body 和 head,html也未闭合
removeOptionalTags: false,
//删除多余的属性
removeRedundantAttributes: true,
//删除script的类型属性,在h5下面script的type默认值:text/javascript 默认值false
removeScriptTypeAttributes: true,
//删除style的类型属性, type="text/css" 同上
removeStyleLinkTypeAttributes: true,
//使用短的文档类型,默认false
useShortDoctype: true, // 压缩内联css
},
template: path.join(__dirname, './src/index.html'), //指定模板,放入内存中,模板的路径
filename: 'index.html', //输出的文件名,
inject: true, //默认script标签放在body底部 body与true相同 head放在head标签内 false:不插入生成的js文件 只是单纯的生成一个html文件
favicon: '', //给html文件生成一个favicon 属性值为 favicon 文件所在的路径名
hash: true,//避免缓存添加hash的值
cache:true,//默认是true的,表示内容变化的时候生成一个新的文件。
showErrors:true,//这个我们自运行项目的时候经常会用到,showErrors 的作用是,如果 webpack 编译出现错误,webpack会将错误信息包裹在一个 pre 标签内,属性的默认值为 true ,也就是显示错误信息。
// 开启这个,方便定位错误
// chunks: ['main','index'],//chunks主要用于多入口文件,当你有多个入口文件,那就回编译后生成多个打包后的文件,那么chunks 就能选择你要使用那些js文件
//
excludeChunks: ['devor.js'],//排除掉一些js
xhtml:false //如果为 true ,则以兼容 xhtml 的模式引用文件。
})
]
// 4.0版本的写法
// mode: 'production',
// mode: 'development',
// 简写的
// entry: {
// main:'./src/main.js',
// he:'./src/hee.js'
// },
// entry: {
// index: path.resolve(__dirname, './src/index.js'),
// devor: path.resolve(__dirname, './src/devor.js'),
// main: path.resolve(__dirname, './src/main.js')
// },
// output: {
// path: path.resolve(__dirname, 'dist'),
// filename: '[name].js'
// },
// module: {
// rules: [{
// test: /\.txt$/,
// use: 'raw-loader'
// }]
// },
// rules: [{
// test: /\.css$/,
// use: [{
// loader: 'style-loader'
// },
// {
// loader: 'css-loader',
// options: {
// modules: true
// }
// }
// ]
// }],
// plugins: [
// new HtmlWebpackPlugin({
// template: './src/index.html'
// })
// ]
};
webpack默认只能处理js,安装loader处理css
npm install style-loader css-loader -D
https://www.npmjs.com/package/sass-loader
less
sass
https://www.npmjs.com/package/sass-loader
处理1,css 安装
https://www.cnblogs.com/lskzj/p/9270839.html
2,处理安装less
3,处理sass
4,url,file-loader加载(url-loadedr是file-loader加强版)
之前是什么名字 之后也是 不改变
babel
https://www.webpackjs.com/loaders/babel-loader/
npm install babel-loader babel-core babel-preset-env webpack
render函数渲染
vue文件打包
引包和暴露
export暴露通过{}接收