vue
Vue
- MVVM
- 安装nodejs和vue
- ES6新特性
- Vue
- Vuejs的语法
- Vue指令
- 计算属性
- 组件Component
- 组件的使用
- 路由Router
- webpack
- Vue-cli脚手架
MVVM
-
Model 模型 通过监听器来监听view的变化，后台发生对应的变化
-
View 视图 通过指令来接收后台的变化，随之变化
-
ViewModel 视图模型
核心是数据的双向绑定
安装nodejs和vue
msi直接安装nodejs
npm常用命令
npm init -y
npm i -g vue //带g的是全局安装
npm uninstall vue
npm update vue
ES6新特性
var和let，var是全局，let是块级（局部）
const常量类型 不能修改
解构表达式
var arr = [1,2,3];
var [a1,a2,a3] = arr;
var obj = {"name":"cdd"}
箭头函数
var obj = {
say:function(food){
console.log();
},
say1:food => {
console.log();
},
say2(food){
console.log();
}
}
promise 异步编程（axios）
模块化编程
export //可以导出任何东西
import //导入
Vue
是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
使用vue
/*
new Vue({})创建一个vue对象
el:挂载 可以通过id或者class
data:{
//可以写数据
msg:""
}
{{msg}}取出数据
*/
生命周期
最重要的两个钩子方法，created，mounted
Vuejs的语法
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="../node_modules/vue/dist/vue.js">script>
head>
<body>
<div id="app1">
<h1>{{5+5}}h1>
<h1>{{5+"v5"}}h1>
<h1>{{5+"5"}}h1>
<h1>{{"5"+"5"}}h1>
<h1>{{"5"-"5"}}h1>
<h1>{{5*5}}h1>
<h1>{{"a"-"b"}}h1>
<h1>{{"5"*"5"}}h1>
<h1>{{5/5}}h1>
{{show?"男":"女"}}
{{"大家好,你是MM还是GG"}}
<br/>
{{"大家好,你是MM还是GG".length}}
<br/>
{{message.substring(6)}}
<br/>
{{"dhajdad".substring(0,4).toUpperCase()}}
div>
<script>
var app1 = new Vue({
el: '#app1',
data: {
show:true,
message:"大家好,我是渣渣辉"
}
});
script>
body>
html>
Vue指令
v-text
将对应的值放进去，不能解析html标签，相当于innerText
v-html
将对应的值放入标签中，可以解析html标签，相当于innerHTML
v-for循环
元素/索引/键 in 数据源
v-bind绑定属性
<img v-bind:src="" />
<img :src="" />
v-model双向绑定
可以绑定到普通的表单元素inputValue
v-show是否展示
true展示，false隐藏，改变的是css中display的值，标签是还在的
v-if判断
true显示，false删除，不成立标签直接没了
v-else判断之外的其他情况
if之外的，使用else标签来操作
v-else-if
就类似if else-if else进行判断
v-on注册事件
v-on:click
简写：@click
计算属性
计算属性本质是一个方法，但是必须返回结果
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--
computed一般是用来计算一些复杂的表达式 例如日期
-->
<div id="app">
{{birth}}
</div>
<script>
var app = new Vue({
el:"#app",
data : {
age:88,
birthday:1529032123201
},
computed:{
birth(){
return new Date(this.birthday).getFullYear()+"年"+new Date(this.birthday).getMonth() + "月"
+ new Date(this.birthday).getDay() + "日"
}
}
})
</script>
</body>
</html>
watch监控一个值的变化
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="../node_modules/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<input type="text" v-model="msg">
div>
<script>
var app = new Vue({
el:"#app",
data : {
age:88,
birthday:1529032123201,
msg:"wdnmd"
},
watch:{
msg(newV,oldV){
console.debug(newV);
console.debug(oldV);
}
}
})
script>
body>
html>
组件Component
组件是用来完成特定功能的一个自定义的html标签
组件的使用
分类
- 全局组件：所有vue实例中都可以使用
- 局部组件：只能在自己的实例中使用
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="../node_modules/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<xxx>xxx>
<yyy>yyy>
div>
<script>
Vue.component("xxx",{
template:"wdnmd
"
})
var configTemplate = {
template:"nsnmn
"
}
Vue.component("yyy",configTemplate);
var app = new Vue({
el:"#app",
data : {
}
})
script>
body>
html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="../node_modules/vue/dist/vue.js">script>
head>
<body>
<template id="ttt">
<div>
<h1>777h1>
<h1>456h1>
div>
template>
<div id="app">
<xxx>xxx>
div>
<script type="text/template" id="gg">
<h1>uuuu</h1>
script>
<script>
// Vue.component("xxx",{
// template:"wdnmd
"
// })
//
// var configTemplate = {
// template:"nsnmn
"
// }
//
// Vue.component("yyy",configTemplate);
var app = new Vue({
el:"#app",
data : {
},
components:{
// xxx:{
// template:"666
"
// }
xxx:{
template:"#ttt"
}
// xxx:{
// template:"#gg"
// }
}
})
script>
body>
html>
3种模板写法
(1)直接在 组件写个template这个模块
template : "<h1>这是一个局部组件h1>"
(2)
<template id="mytemplate">
<h1>template标签中的html1111111h1>
template>
在组件里面引用 template
template : "#mytemplate"
(3)
<script type="text/template" id="mytemplate">
<h1>template标签中的html</h1>
script>
在组件里面引用 template
template : "#mytemplate"
路由Router
(1)先安装
npm install vue-router
(2)引入文件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="../node_modules/vue/dist/vue.js">script>
<script src="../node_modules/vue-router/dist/vue-router.js">script>
head>
<body>
<div id="app">
<router-link to="/xxx">xxxrouter-link>
<router-link to="/yyy">yyyrouter-link>
<hr />
<router-view>router-view>
div>
<script>
var xxx = Vue.component("xxx",{
template:"wdnmd
"
})
var configTemplate = {
template:"nsnmn
"
}
var yyy = Vue.component("yyy",configTemplate);
var router = new VueRouter({
routes:[
{
path:"/xxx",
component:xxx
},{
path:"/yyy",
component:yyy
}
]
})
var app = new Vue({
el:"#app",
data : {
},
components:{
// xxx:{
// template:"666
"
// }
// xxx:{
// template:"#ttt"
// }
// xxx:{
// template:"#gg"
// }
},
router:router
})
script>
body>
html>
webpack
打包工具，把项目的所有资源，打包成小的资源。
作用
- 减少页面对于资源的请求，提高效率
- 兼容低版本的浏览器
- 打包的同时进行混淆，提高代码的安全性
Vue-cli脚手架
vue官方提供了一个快速构建项目的脚手架
步骤
(1)npm install -g @vue/cli
(2)vue create hello-world
(3)选中 VueProject(第二个)
(4) cd hello-world
yarn serve – 运行
yarn build – 编译(额外生成一些文件)
(5) npm run serve --运行