实例成员：计算属性 监听属性以及vue的项目开发

6）字符串补充

双引号：
    “前缀” + 变量 + “后缀”
单引号：
    ‘前缀’ + 变量 + ‘后缀’
反引号：
    `前缀$(变量)后缀`
    ps：在反引号中可以用$（）来包裹变量，实现字符串的拼接

7）实例成员：计算属性 监听属性

计算属性：

​ 1）计算属性其实就是vue中的方法属性，方法名可以作为属性来使用，属性值就是方法的返回值

​ 2） 在computed中声明的方法属性，不能在data中重复声明，比data中声明的属性要多出些逻辑的的地方

​ 3）方法属性自带监听机制，在方法属性中出现的变量，都会被监听，一旦任何被监听的变量值发生更新，方法属性都会调用方法更新方法属性的值

​ 4 方法属性一定要在页面中渲染一次，这样方法属性才会有意义，多次渲染，方法属性只会被调用一次

方法属性的应用场景：一个变量依赖于多个变量，且需要进行一定的逻辑运算

案例：

计算机案例：
    

    
    
    +
    
    =
    {{ sum }}

监听属性

​ 1）watch中不定义属性，只是监听属性，所以方法的返回值没有任何的意义

​ 2）watch中的方法名，就是被监听的属性（方法名同被监听属性名要一致）

​ 3）被监听的变量值一旦发生更新，监听的方法就会被调用

应用场景：

​ 1）k线图：股票数据变化，页面的k线图重新渲染（需要逻辑将数据转换成图形）

​ 2）拆分姓名：录入姓名，拆分成姓和名（需要逻辑将每一个数据拆分成多个数据）

案例：

拆分姓名：

    姓名：
    

    姓：{{ first_name }}
    名：{{ last_name }}

二.vue的项目开发

1)环境：安装vue的脚手架cli环境

"""
node    ~~      python
npm     ~~      pip

python：c语言编写，解释执行python语言的
node：c++语言编写，解释执行JavaScript语言的
npm类似于pip，是为node环境安装额外功能的

"""

"""
1）官网下载并安装node，附带npm
    https://nodejs.org/zh-cn/
2）换源：将npm欢迎为cnpm
    npm install -g cnpm --registry=https://registry.npm.taobao.org
3）安装vue脚手架  
    cnpm install -g @vue/cli
注：如果第二三步异常，基本都是由网络导致的，可以重新执行第二三步，如果一直有问题，可以清理缓存后重复
    npm cache clean --force
"""

2)项目的创建：在终端创建

具体步骤：

​ 见文档pdf

​

各插件的作用

​ Babel：将ES6语法解析为ES5语法给浏览器

​ Router：前台路由

​ Vuex：前台仓库，相当于单例，完成各组件的传参

项目移植步骤：

​ 1）拷贝出环境，除node_modules 以外的文件和文件夹到目标文件夹

​ 2）终端进入目标文件夹所在的位置

​ 3）执行：nmp install 重新构建依赖 （nmp可以换成cnpm）

pycharm配置并启动vue项目，vue项目目录结构的分析

​ 见文档pdf

vue组件(.vue文件)

"""
注：pycharm安装vue.js插件，就可以高亮显示vue文件了

1）一个.vue文件就是一个组件
2）组件都是由三部分组成：html结构、js逻辑、css样式
    html结构都是在template标签中，页面结构有且只有一个根标签（template一级结构下）
    js逻辑都是在script标签中，必须设置导出，export default {...}
    css样式都是在style标签中，必须设置scoped属性，是样式组件化
"""

全局脚本文件main.js（项目入口）

"""
1）main.js是项目的入口文件
2）new Vue()就是创建根组件，用render读取一个.vue文件，$mount渲染替换index.html中的占位
3）项目所依赖的环境，比如：vue环境、路由环境、仓库环境、第三方环境、自定义环境都是在main.js中完成
"""

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

改写

import Vue from 'vue'  // 加载vue环境
import App from './App.vue'  // 加载根组件
import router from './router'  // 加载路由环境
import store from './store'  // 加载数据仓库环境

Vue.config.productionTip = false;  // tip小提示

import FirstCP from './views/FirstCP'
new Vue({
    el: '#app',
    router: router,
    store: store,
    render: function (readVueFn) {
        return readVueFn(FirstCP);  // 读取FirstCP.vue替换index.html中的占位
    }
});

路由与根组件（重点）

路由核心配置：router/index.js

// import 别名 from '文件'
import Home from '../views/Home'
import About from '../views/About'
import First from '../views/FirstCP'

// 路由配置
// 1）当用户在浏览器中访问的路由是 / ，router插件就会加载 Home.vue文件，同理 /about 就是 About.vue文件
// 2）将加载的 Home.vue文件 或者 About.vue文件，去替换App.vue文件中的 占位符
// 3）用redirect配置来实现路由的重定向
const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/home',
        redirect: '/',  // 路由的重定向
    },
    {
        path: '/about',
        name: 'About',
        component: About
    },
    {
        path: '/first',
        name: 'First',
        component: First
    }
];

根组件占位渲染页面组件

页面组件渲染小组件（重点）

页面组件作为父组件：views/*.vue

导航栏小组件(封装路由跳转)：components/*.vue