vue学习实践，老司机等你来开车

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 插槽传递模板

高级功能

微型

---

项目

教程地址 https://blog.csdn.net/fungleo/article/details/77600798

运行过程中报的错误

需要安装的模块

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