1.computed：计算属性
computed是Vue对象的实例成员之一。在computed可以定义方法属性，可以像调用属性一样来调用方法并返回该方法的返回值。
1.是vue中的方法属性，方法名可以作为属性来使用，返回该方法的返回值。
2.computed中声明的方法属性，不能在data中重复声明。computed中可以写更多的逻辑。
3.方法属性自带监听机制，在方法属性中出现的所有变量都会被监听，一旦有任何被监听的变量值发生更新，方法属性都会调用更新方法属性的值。
4.方法属性一定要在页面中渲染一次，方法属性采用意义，多次渲染，方法属性只会被调用一次。
案例：简易计算器
通过监听num1和num2的值来实时得出sum结果
<div id="app">
<input type="text" v-model="num1">
+
<input type="text" v-model="num2">
=
<input type="button" :value="sum">
</div>
<script>
let app = new Vue({
el:'#app',
data:{
num1:0,
num2:0,
},
computed:{
sum(){
return (+this.num1) + (+this.num2)
}
}
})
</script>
2.watch监听属性
监听属性是为某一个变量定义同名的监听方法，当该变量的值发生改变时，会相应的执行watch中定义的同名方法。监听方法的返回值通常没有意义。
<div id="app">
<input type="text" v-model="num">
</div>
<script>
let app = new Vue({
el:'#app',
data : {
num:0
},
watch:{
num(){
if (+this.num % 2 == 0){
console.log(this.num + ' 是偶数')
}else{
console.log('不是偶数')
}
}
}
})
</script>
Vue项目开发
"""
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
"""
项目创建
Babel：将ES6语法解析为ES5语法给浏览器
Router：前台路由
Vuex：前台仓库，相当于单例，完成个组件间传参的
项目移植
"""
1）拷贝出环境 node_modules 以外的文件与文件夹到目标文件夹
2）终端进入目标文件夹所在位置
3）执行：npm install 重新构建依赖（npm可以用cnpm替换）
"""
Vue项目目录结构分析
├── v-proj
| ├── node_modules // 当前项目所有依赖，一般不可以移植给其他电脑环境
| ├── public
| | ├── favicon.ico // 标签图标
| | └── index.html // 当前项目唯一的页面
| ├── src
| | ├── assets // 静态资源img、css、js
| | ├── components // 小组件
| | ├── views // 页面组件
| | ├── App.vue // 根组件
| | ├── main.js // 全局脚本文件（项目的入口）
| | ├── router
| | | └── index.js// 路由脚本文件（配置路由 url链接 与 页面组件的映射关系）
| | └── store
| | | └── index.js// 仓库脚本文件（vuex插件的配置文件，数据仓库）
| ├── README.md
└ └── package.json等配置文件
vue单文件组件(.vue文件)
根组件-views组件（一般是一个页面）- components（一个小的组件如：导航条）
"""
注：pycharm安装vue.js插件，就可以高亮显示vue文件了
1）一个.vue文件就是一个组件
2）组件都是由三部分组成：html结构、js逻辑、css样式
html结构都是在template标签中，页面结构有且只有一个根标签（template一级结构下）
js逻辑都是在script标签中，必须设置导出，export default {...}
css样式都是在style标签中，必须设置scoped属性，是样式组件化
"""
<template>
<div class="first-cp">
<h1>第一个组件</h1>
</div>
</template>
<script>
// .vue文件类似于模块，可以直接相互导入，所以在组件内部要设置导出
export default {
}
</script>
<style scoped>
/* scoped可以使样式组件化，只在自己内部起作用 */
</style>
全局脚本文件main.js(项目入口)
"""
1）main.js是项目的入口文件
2）new Vue()就是创建根组件，用render读取一个.vue文件，$mount渲染替换index.html中的占位
3）项目所依赖的环境，比如：vue环境、路由环境、仓库环境、第三方环境、自定义环境都是在main.js中完成
"""
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' // 默认从node_modules导入
import App from './App.vue' // 根组件
import router from './router' // 路由匹配
import store from './store' // 加载数据仓库环境
Vue.config.productionTip = false; // tip提示
import FirstPage from './views/FirstPage'
new vue({
el : '#app',
router:router,
store:store,
render:function(readVueFn){
return readVueFn(App)
}
})