vue 实战2
前置知识
- node npm
- html css js
- es6 语法
为什么要用vuejs
数据渲染 /数据同步
组件化 / 模块化
其他功能: 路由、ajax、数据流
学习资源:
vuejs官网
vuejs GitHub
vuejs官方论坛 forum.vuejs.org
Vue基本概念
全局api
实例选项
实例属性/方法
指令
内置组件
let root = new Vue({
el: '#app',
data: {
message: 'hello'
},
components: {
'my-header': myHeader
}
})
root.$data
root.$on('emit', function(){})
for指令
<ul>
<li v-for="(item, index) in list">{{item.name}} - {{item.value}} -- {{index}}</li>
</ul>
//遍历json对象
<li v-for="(value, key) in objList">{{key}} -- {{value}}</li>
渲染变量
v:bind 绑定属性 v2建议 title="{{title}}"
:title="title"
title是变量
//
v-text 全部以文本形式渲染
v-html 可以渲染html标签
小结:
文本渲染 v-text v-html {{}}
列表渲染 数组 对象
列表数据的同步更新
let vm = new Vue({
el: '#app',
data: {
list: [
{
name: 'apple',
price: 1024
},
{
name: 'banana',
price: 2046
}
]
},
methods: {
addItem() {
this.set(this.list, 1, {
name: 'sdbl',
price: 2313
})
}
}
})
标签属性和条件渲染
v-bind:属性=“属性值”
v-if="" 为假时,文档流删除
v-show="" 为假是,display:none
小结
v-bind 动态绑定标签属性
v-bind
简写为 :
使用v-bind可以绑定 class 和内联样式
使用 v-if, v-show, v-else 条件渲染
事件绑定和表单
v-on
@
修饰符 parent
默认父级事件 stop
阻止冒泡
@click
表单控件绑定
v-model
v-model.lazy
输入完成才渲染
小结
v-on @
methods 事件绑定
v-on修饰符 可以指定键盘事件,或其他一些事件
v-model 实现表单数据双向绑定
计算属性和监听数据
computed
computed: {
myVauleWithoutNum() {
return this.myValue.replace(/\d/g, '') //数字都去掉
}
}
watch 属性监听
watch: {
myValue: function(val, oldVal) {
console.log(val, oldVal)
}
}
小结
compute 计算属性
可以通过methods调用方法来计算属性
watch 监听属性变化
深入vue组件
子组件通过props获取父组件属性
子组件通过emit Event事件向父级传递参数
组件插槽 <slort>
组件通信
总结
- 使用组件树设计项目,配置文件链接各个组件
- 命名转换 标签和属性用短划线命名,{{camelCase}}
- 动态组件
- 父组件向内传递属性
props
动态属性 - 子组件向外发布事件
emit
- slot 插槽传递模板
高级功能
微型
项目
运行过程中报的错误
需要安装的模块
npm install sass-loader --save-dev
npm install node-sass -D
npm install axios
7初识vue组件
本地反向代理获取接口数据
vue-cli 脚手架帮我们考虑到了前后端分离数据获取的问题,我们只需配置一下就可以了,这里不做介绍,详情Google
http-server
开启本地server
-p 监听的端口
-P 参数设置反向代理网址
http-server-middleware
实现反向代理
const express = require('express')
const proxy = require('http-proxy-middleware')
var app = express()
app.use('/api', proxy({target: 'https://cnodejs.org', changeOrigin: true}))
app.listen(3000)
// http://localhost:3000/api/foo/bar -> http://cnodejs.org/api/foo/bar