Vue（适合移动端的项目，特点小巧，不兼容ie）
https://cn.vuejs.org（官网）
基础代码（声明式渲染）
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
Document
{{message}}
我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。
除了文本插值，我们还可以像这样来绑定元素特性：
Document
//简写v-bind：title 可以写成：title
鼠标悬停此处查看动态绑定提示信息
//class宇style是特例 两者绑定的方式相同举例如下（注意复合样式，采用驼峰命名法）
//第一种方法
data:{
c:{color:'red'},
b:{backgroundColor:'blue'}
}
文字
//第二种方法
data:{
json:{
color:'red',
backgroundColor:'green'
}
}
这是个文字
这里我们遇到了一点新东西。你看到的 v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。
双向数据绑定
Document
{{msg}}
结合案例：
Document
v-for
Document
//vue是根据当前指定值使用一定的算法，计算，算出一个元素的唯一标识，给定key，则节省了运算标识的消耗.
处理用户输入
为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：
Document
{{msg}}
//v-on：click可以简写成为@click
//@click.stop(阻止冒泡) 或者ev.cancelBubble=true;
//@click.prevent(阻止默认事件)或者ev.preventDefault();
键盘事件
Document
//@keydown.enter 后面可以是键码或者是具体的名称
模板
一次性绑定 v-once
{{once}}
不进行 html 转义
不转义的绑定（直接输出 html）
render属性
Document
//var App= {};等同于 var App=Vue.extend ({});(语法糖)
v-text
Document
//元素的innerText ，只能是双标签，不会解析标签
v-html
Document
//元素的innerHtml ，只能是双标签 ， 会解析标签
v-if与v-else
Document
漂亮的列表案例
Document
// 在做:class 就等于v-bind:class
- 在内部就可以随意的获取data下面的属性，从而来做判断
* 设置了一个`{变量值:'样式1',变量值:'样式2'}[hero.level]`
* class:
- 取其一
+ 三元表达式，最终返回字符串
+ 从对象中通过key去取值，最终返回字符串
- 取多个样式 (样式1 样式2)
+ 对象的方式 `{样式1:true,样式2:true}`
components
Document
webpack(打包工具)
webpack 入口文件 出口文件
`webpack ./main.js ·/build.js`
webpack.png
webpack模块化开发
项目目录
components.png
代码结构
index.html代码
Document
main.js代码
//启动vue
var Vue = require('../vue.js');
var App= require('./App.js');
new Vue({
el:'#app',
render:c=>c(App)
})
App.js代码
/ /入口组件
var HeaderVue=require('./HeaderVue.js');
var BodyVue=require('./BodyVue.js');
var FooterVue=require('./FooterVue.js');
module.exports = {
template:`
·
代码结构
index.html代码
Document
main.js代码
//启动vue
var Vue = require('../vue.js');
var App= require('./App.js');
var Header=require('./HeaderVue.js')
var Body=require('./BodyVue.js')
var Footer=require('./FooterVue.js')
Vue.component('header-vue',Header);
Vue.component('body-vue',Body);
Vue.component('footer-vue',Footer);
new Vue({
el:'#app',
render:c=>c(App)
})
App.js代码
/ /入口组件
module.exports = {
template:`
父向子传递值
Title
子向父传递值
Document
增删改查
Document
过滤器
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
创建 Vue 实例之前全局定义过滤器：（举例首字母大写过滤器）
Document
{{msg|capitalize}}
·
Document
全局过滤器
Document
watch
Document
//监视watch
//* 需求：
//- 监视一个值的改变,页面中的change事件
//* 监视单个data中的属性值的改变
//- 原始数据类型 watch:{ 属性名:fn }
//- 引用数据类型 watch:{ 属性名:{deep:true,handler:fn}
计算属性
Document
生命周期
//生命周期
//* 实例:
// - 1: `new Vue()` vue的实例 （一个）
//- 2: 组件内的this对象，组件对象的实例 （多个）
//
//* 总结
//- beforeCreate 相比created数据还未初始化
//- created 相比mounted，还未生成DOM
//+ 可以发起ajax请求，获取数据，变更数据，来做装载
//- beforeMount
//- 装载中。。。。。生成DOM（包含数据）
//- mounted
//+ 可以操作DOM
//- created用来操作数据,mounted用来操作DOM
Document
获取元素
* 1: 在template模板中元素上加上 ref="xxx"
* 2: 在函数、或者mounted钩子函数中 获取: this.$refs.xxx 元素
- 如果ref="xxx" 是写在原生DOM元素上，获取的就是原生DOM元素
- 如果ref="xxx" 是放在组件标签上，获取的就是组件对象
内置组件
* keep-alive
- 可以将频繁插入和移除的元素，进行缓存，而无需重复的创建和销毁
- 其包裹的元素，就有这个效果，同时也会根据v-if不同的结果
- 触发 激活和停用事件，此2事件与 destroyed和created互斥
·
总结
* 事件的回调函数 = 钩子函数
* beforeCreate 创建之前（组件） 没有完成数据的初始化
* created 创建之后，可以操作数据（最佳） v-if="true"
* beforeMount 装载之前(数据) = template + data 结合 + 放置到 目的地
* mounted 装载之后，可以操作DOM,给dom元素添加一些事件, 修改某个DOM元素的显示
* 在正常顺序下不会触发的
* beforeUpdate 更新之前(组件数据),尽量少用
* updated 更新之后,尽量少用
* activated 激活（组件）配合keep-alive内置组件来使用,将组 件数据缓存到js内存中
* deactivated 停用（组件）配合keep-alive内置组件来使用
* beforeDestroy 销毁之前（组件） v-if="false"
* destroyed 销毁之后(组件)
* 创建、激活 根据v-if="true"来决定
* 销毁、停用 根据v-if="false"来决定
Document
vue-router
//index.html
Document
//main.js
//引入Vue
var Vue = require('../vue.js');
//引入VueRouter
var VueRouter = require('../vue-router.js');
var App = require('./App.js');
//安装插件
Vue.use(VueRouter); //挂载一些属性，供组件使用其功
//创建路由对象
var router = new VueRouter({
//配置路由规则
routes: [{
path: '/music',
component: { //组件内容，也可以引入
template: `
我是音乐，在人民广场吃炸鸡！
`
}
},{
path: '/movie',
component: { //组件内容，也可以引入
template: `
我是电影， 摔跤吧爸爸！
`
}
}]
});
//把路由对象交给vue
new Vue({
el:'#app',
router:router,
render:c=>c(App)
})
//App.js
module.exports = {
template:`
我是App主体
以下是变化的内容，留坑
router-link
//index.html
Document
//main.js
var Vue = require('vue/dist/vue.common.js');
var VueRouter = require('vue-router/dist/vue-router.common.js');
var App = require('./App.js');
var Home = require('./Home.js');
var Music = require('./Music.js');
var Movie = require('./Movie.js');
//安装插件
Vue.use(VueRouter);
//创建路由对象
var router = new VueRouter({
routes:[
{ path:'/',component:Home }, //Home有头中底
{ path:'/music',component:Music },
{ path:'/movie',component:Movie },
]
});
new Vue({
el:'#app',
router,
render:c=>c(App)
})
//App.js
module.exports = {
template:`
我是App
音乐
电影
正在热播....
版权所有违者必究
`
}
//music.js
module.exports = {
template:`
我是音乐
`
}
//movie.js
module.exports = {
template:`
我是电影
`
}
#### router-link
* vue-router内置组件,可以根据to的属性生成a标签及其href,让我们不用担心是#还 是#!等等等。。
* `xxx`
* `xxx `
router-named
//index.html
Document
//App.js
module.exports = {
template:`
我是App
音乐
音乐
音乐
电影
电影
电影
正在热播....
版权所有违者必究
`
}
//main.js
module.exports = {
template:`
音乐
音乐
音乐
电影
电影
电影
正在热播....
版权所有违者必究
`
}
//mocie.js
module.exports = {
template:`
我是电影
`
}
//music.js
module.exports = {
template:`
我是音乐
`
}
#### 命名路由
* 通过name属性去寻找路由规则，获取其path属性，作为a标签的href属性
* 生成:
- 操作 `查询字符串的显示
//index.html
Title
//App.js
module.exports={
template:`
-
{{hero.name}}
查看详情
路径方式
-
{{hero.name}}
查看详情
`,
data(){
//干掉:function，this指向一致
return {
heros:[ {id:1,name:'小粑粑'} ,{id:2,name:'大雄'},{id:3,name:'胖虎'}]
}
}
}
String.png
path.png
多视图
//index.html
Document
//main.js
var Vue = require('../vue.js');
var VueRouter = require('../vue-router.js');
var App = require('./App.js');
var HeaderVue = require('./HeaderVue.js');
var BodyVue = require('./BodyVue.js');
var FooterVue = require('./FooterVue.js');
//全局组件
// Vue.component('header-vue',HeaderVue);
// Vue.component('body-vue',BodyVue);
// Vue.component('footer-vue',FooterVue);
//安装插件
Vue.use(VueRouter);
//创建路由对象
var router = new VueRouter({
routes:[
{
path:'/',components: {
'a':FooterVue,
'b':HeaderVue,
'default':BodyVue
}
}
]
});
new Vue({
el:'#app',
router,
render:c=>c(App)
})
//App/jsmodule.exports = {
template:`
嵌套路由 与页面的重定向和404
//index.html
Document
//main.js
var Vue=require('../vue.js');
var VueRouter=require('../vue-router.js');
var App=require('./App.js');
var Home=require('./Home.js');
var Music=require('./Music.js');
var Movie=require('./Movie.js');
var NotFount=require('./NotFount.js')
Vue.use(VueRouter);
var router=new VueRouter({
routes:[
{path:'/',redirect:'/home'},//页面的重定向 一开始默认进入页面时显示的页面 redirect:'/home'
{path:'*',component:NotFount},//当页面404的时候显示的友好页面
{name:'home',path:'/home',component:Home,
children:[
{name:'home.music',path:'music',component:Music},
{name:'home.movie',path:'movie',component:Movie}
]
}]
});
new Vue({
el:'#app',
router:router,
render:c=>c(App)
})
//App.js
module.exports = {
template:`
音乐
电影
编程导航
//index.html
Document
//main.js
var Vue = require('vue/dist/vue.common.js');
var VueRouter = require('vue-router/dist/vue-router.common.js');
var App = require('./App.js');
var Home = require('./Home.js');
//安装插件
Vue.use(VueRouter);
//创建路由对象
var router = new VueRouter({
routes:[
{ name:'home', path:'/home',component:Home},
]
});
new Vue({
el:'#app',
router,
render:c=>c(App)
})
//App.js
module.exports = {
template:`
输入:
webpack：
使用配置文件设置出入口
//index.html
Document
//main.js
var cal = require('./cal.js');
console.log(cal.add(8,7));
//cal.js
module.exports = {
add(n1,n2){
return n1 + n2;
}
}
//weboack.config.js
// 运行的环境是node
'use strict';
module.exports = {
//配置对象
entry:{//入口
//入口之一
'test1233':'./main.js'
},
//出口（产出）
output:{
//生成的js文件名
filename:'./build.js'
}
}
css-loader
首先我们在文件打开命令行 npm i css-loader style-loader -D
//index.html
Document
//index.css
body{
background-color: yellowgreen;
}
//main.js
require('./index.css');
//webpack.config.js
module.exports = {
entry:{
'main':'./main.js'
},
output:{
filename:'./build.js'
},
//模块，对象
module:{
//一堆加载器 loaders
loaders:[
//解析css
{
//匹配条件 './index.css'
test:/\.css$/, //以.css结尾的文件
loader:'style-loader!css-loader',
//代码顺序是1,2 执行顺序 2,1,顺序不要搞凡
}
]
}
}
less-loader
首先我们在文件打开命令行 npm i less-loader less -D
//index.html
Document
//index.less
@color:skyblue;
body{
background-color: @color;
}
//main.js
require('./index.less');
//webpack.config.js
module.exports = {
entry:{
'main':'./main.js'
},
output:{
filename:'./build.js'
},
//模块，对象
module:{
//一堆加载器 loaders
loaders:[
//解析css
{
//匹配条件 './index.css'
test:/\.css$/, //以.css结尾的文件
loader:'style-loader!css-loader',
//代码顺序是1,2 执行顺序 2,1,顺序不要搞凡
},
{
test:/\.less$/,
loader:'style-loader!css-loader!less-loader',
}
]
}
}
解析文件
//首先我们 npm i url-loader file-loader -D
//webpack.cpnfig.js
module.exports = {
entry:{ //入口
'main':'./src/main.js'
},
output:{ //产出
path:'./dist', //输出目录 使用好像会报错 现在不能用了好像
filename:'build.js' //js文件名
},
//模块，对象
module:{
//一堆加载器 loaders
loaders:[
//解析css
{
//匹配条件 './index.css'
test:/\.css$/, //以.css结尾的文件
loader:'style-loader!css-loader',
//代码顺序是1,2 执行顺序 2,1,顺序不要搞凡
},
{
test:/\.less$/,
loader:'style-loader!css-loader!less-loader',
},
{
//通过url-loader来依赖file-loader
//如果url-loader满足条件，则将文件生成base64编码
//如果url-loader不满足条件，则新生成原文件
test:/\.(jpg|png|svg|ttf|gif)$/,
loader:'url-loader?limit=4096&name=[name].[ext]', //依赖file-loader内部由url来判断调用
//limit=4096 资源再4096btye以下生成base64,以上则生成文件
//[name].[ext] 原名.原后缀名
}
]
}
}
//src/index.html
Document
//src/index.css
body{
background-image: url('./1.jpg');
}
//src/main.js
require('./index.css');
#### 处理文件 + base64
* 将文件以base64加密,好处:减少请求次数
* 图片在经过加密后，会在原大小基础上，增加三分之一左右
* 应用场景:
- 针对不大的图片，而频繁需要使用的场景
- 4096b 4kb
特殊符号
* 字符串内存在! 代表分隔多个
* 字符串内存在? 代表参数 ?key=value&key=value
* 字符串内& 还是并且的意思
字符串内使用的内置变量
* 在字符串内使用`[name]` 文件的原名
* `[ext]` 文件原后缀名
* output:{}
- path 资源输出路径
- filename js文件名
html插件
//首先我们 npm i html -webpack-plugin -D
//然后再次npm i webpack -D
//webpack.config.js
'use strict';
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:{ //入口
'main':'./src/main.js'
},
output:{ //产出
filename:'build.js' //js文件名
},
//模块，对象
module:{
//一堆加载器 loaders
loaders:[
//解析css
{
//匹配条件 './index.css'
test:/\.css$/, //以.css结尾的文件
loader:'style-loader!css-loader',
//代码顺序是1,2 执行顺序 2,1,顺序不要搞凡
},
{
test:/\.less$/,
loader:'style-loader!css-loader!less-loader',
},
{
//通过url-loader来依赖file-loader
//如果url-loader满足条件，则将文件生成base64编码
//如果url-loader不满足条件，则新生成原文件
test:/\.(jpg|png|svg|ttf|gif)$/,
loader:'url-loader?limit=4096&name=[name].[ext]', //依赖file-loader内部由url来判断调用
//limit=4096 资源再4096btye以下生成base64,以上则生成文件
//[name].[ext] 原名.原后缀名
}
]
},
plugins:[
//一堆插件中的一个，第一个执行
new htmlWebpackPlugin({
//参照模板
template:'./src/index.html'
})
]
}
#### 处理html
* npm i html-webpack-plugin -D
* 在配置文件中，引入这个对象
* 在webpack配置对象的根属性中，设置plugins:[ new 以上对象(options)]
* 插件数组元素的顺序，与代码的执行顺序一致
* `options:{ template:'./src/index.html' //参照物 }`
处理es6
//首先我们npm i babel-loader babel-core babel-preset-env babel-plugin-transform-runtime -D
//'use strict';
const htmlWebpackPlugin = require('html-webpack-plugin');
const path = require("path")
module.exports = {
entry:{ //入口
'main':'./src/main.js'
},
output:{ //产出
path:path.resolve("./dist"), //输出目录
filename:'build.js' //js文件名
},
//模块，对象
module:{
//一堆加载器 loaders
loaders:[
//解析css
{
//匹配条件 './index.css'
test:/\.css$/, //以.css结尾的文件
loader:'style-loader!css-loader',
//代码顺序是1,2 执行顺序 2,1,顺序不要搞凡
},
{
test:/\.less$/,
loader:'style-loader!css-loader!less-loader',
},
{
//通过url-loader来依赖file-loader
//如果url-loader满足条件，则将文件生成base64编码
//如果url-loader不满足条件，则新生成原文件
test:/\.(jpg|png|svg|ttf|gif)$/,
loader:'url-loader?limit=4096&name=[name].[ext]', //依赖file-loader内部由url来判断调用
//limit=4096 资源再4096btye以下生成base64,以上则生成文件
//[name].[ext] 原名.原后缀名
},
//处理js
{
test:/\.js$/,
loader:'babel-loader',
//排除node_modules目录
exclude:/node_modules/,
//设置语法预设、函数插件
options:{
//处理语法部分
presets:['env'],//处理es2015/2016/2017语法部分
plugins:['transform-runtime'],//处理函数部分
}
}
]
},
plugins:[
//一堆插件中的一个，第一个执行
new htmlWebpackPlugin({
//参照模板
template:'./src/index.html'
})
]
}
//main.js
let num = 1;
const num2 = 2;
let fn = ()=>{
return 1;
}
let num3 = Math.trunc(3.165);
console.log(num3);
new Promise(function(resolve,reject){
});
#### ES6
* const let Math.trunc
#### babel语法转换器
* es6/es7/react
* 设置语法 es6
* 通过插件设置 转换函数
* 通过webpack 将所有的js代码，进行转换,babel-loader，其依赖于babel-core
* 语法babel-preset-es2015(babel-preset-env:包含了所有(es6/es7/es8) )
- es2015/es2016/es2017
* 函数babel-plugin-transform-runtime
* babel-loader babel-core babel-preset-env babel-plugin-transform-runtime
引入vue
//首先倒入依赖包 npm i vue-template-compiler vue-loader -D
//index.html
单文件
//main.js
const Vue = require('vue/dist/vue.runtime.common.js');
//App组件
const App = require('./App.vue').default; //以vue结尾的加上default
// module.exports = { default:{xxxx} } = export default App;
// console.log(App); //{ default:组件的options }
new Vue({
el:'#app',
render:c=>c(App)
});
//app.css
#d1{
background-color: yellowgreen;
}
//正常app.js用来对比app.vue
// css
require('./app.css');
module.exports = {
//HTML
template:`
我是App.js组件
`,
//jS
created(){
console.log('我是App.js组件 ');
}
}
//app.vue
我是app.vue组件
//webpack.cpnfig.js
'use strict';
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:{ //入口
'main':'./src/main.js'
},
output:{ //产出
path:'./dist', //输出目录
filename:'build.js' //js文件名
},
//模块，对象
module:{
//一堆加载器 loaders
loaders:[
//解析css
{
//匹配条件 './index.css'
test:/\.css$/, //以.css结尾的文件
loader:'style-loader!css-loader',
//代码顺序是1,2 执行顺序 2,1,顺序不要搞凡
},
{
test:/\.less$/,
loader:'style-loader!css-loader!less-loader',
},
{
//通过url-loader来依赖file-loader
//如果url-loader满足条件，则将文件生成base64编码
//如果url-loader不满足条件，则新生成原文件
test:/\.(jpg|png|svg|ttf|gif)$/,
loader:'url-loader?limit=4096&name=[name].[ext]', //依赖file-loader内部由url来判断调用
//limit=4096 资源再4096btye以下生成base64,以上则生成文件
//[name].[ext] 原名.原后缀名
},
//处理js
{
test:/\.js$/,
loader:'babel-loader',
//排除node_modules目录
exclude:/node_modules/,
//设置语法预设、函数插件
options:{
//处理语法部分
presets:['env'],//处理es2015/2016/2017语法部分
plugins:['transform-runtime'],//处理函数部分
}
},
{
//处理vue
test:/\.vue$/,
loader:'vue-loader', //依赖vue-template-compiler
}
]
},
plugins:[
//一堆插件中的一个，第一个执行
new htmlWebpackPlugin({
//参照模板
template:'./src/index.html'
})
]
}
#### 单文件方式
* 引包的方式（方式一）
- var 组件 = {}
* 浅尝webpack
- 解析commonjs (组件 + 模块的使用)
* 单文件方式（方式二）
- 以App.vue方式来编写代码 （结合webpack来编写）
- 主流方式
* 注意 在引入.vue的文件的时候，加上.default来获取options对象
* 原因在于 在vue-loader中，默认是以ES6导出的，而我们以commonjs引入的，
* 由于webpack最终会把es6转换成commonjs中的module.exports.default = App组件
总结
//index.html
Document
//main.js
const Vue = require('../vue.js');
const VueRouter = require('../vue-routerjs');
// const VueRouter = require('vue-router').default;
//因为组件，是.vue文件，而其是被vue-loader加载，又因为，vue-loader向外导出的方式是es6的模块
//所以，我们require最终拿到的是 module.exports -> { default:对象 }
//ES6模块导出代码 export default 对象 ，es6模块导出，就是一个对象，default是其中的属性
const App = require('./App.vue').default;
const Home = require('./Home.vue').default;
//安装插件
Vue.use(VueRouter);
//创建路由对象
let router = new VueRouter({
routes:[
{ path:'/',redirect:{ name:'home'} },
{ name:'home',path:'/home',component:Home }
]
});
new Vue({
el:'#app',
router,
render:c=>c(App)
})
//Home.vue
我是home首页
//App.vue
我是app.vue啊啊啊