6）字符串补充
双引号：
“前缀” + 变量 + “后缀”
单引号：
‘前缀’ + 变量 + ‘后缀’
反引号：
`前缀$(变量)后缀`
ps：在反引号中可以用$（）来包裹变量，实现字符串的拼接
7）实例成员：计算属性 监听属性
计算属性：
1）计算属性其实就是vue中的方法属性，方法名可以作为属性来使用，属性值就是方法的返回值
2） 在computed中声明的方法属性，不能在data中重复声明，比data中声明的属性要多出些逻辑的的地方
3）方法属性自带监听机制，在方法属性中出现的变量，都会被监听，一旦任何被监听的变量值发生更新，方法属性都会调用方法更新方法属性的值
4 方法属性一定要在页面中渲染一次，这样方法属性才会有意义，多次渲染，方法属性只会被调用一次
方法属性的应用场景：一个变量依赖于多个变量，且需要进行一定的逻辑运算
案例：
计算机案例：
<div id="app">
<!-- type="number"表示只能写数字 -->
<input type="number" v-model="num1" max="100" min="0">
+
<input type="number" v-model="num2" max="100" min="0">
=
<button>{{ sum }}</button>
</div>
<script>
new Vue({
el: '#app',
data: {
// sum: '', // 重复声明
num1: '',
num2: '',
},
computed: {
sum () {
// num1和num2都在该方法属性中，所以有一个更新值，该方法都会被调用
if (this.num1 && this.num2) {
return +this.num1 + +this.num2; // +this.num1是将字符串快速转换澄数字
}
return '结果';
}
}
})
</script>
监听属性
1）watch中不定义属性，只是监听属性，所以方法的返回值没有任何的意义
2）watch中的方法名，就是被监听的属性（方法名同被监听属性名要一致）
3）被监听的变量值一旦发生更新，监听的方法就会被调用
应用场景：
1）k线图：股票数据变化，页面的k线图重新渲染（需要逻辑将数据转换成图形）
2）拆分姓名：录入姓名，拆分成姓和名（需要逻辑将每一个数据拆分成多个数据）
案例：
拆分姓名：
<div id="app">
姓名：<input type="text" v-model="full_name">
<hr>
姓：<button>{{ first_name }}</button>
名：<button>{{ last_name }}</button>
</div>
<script>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '未知',
last_name: '未知'
},
watch: {
full_name () {
if (this.full_name) {
// 只是实现简易的拆分逻辑
this.first_name = this.full_name.split('')[0];
this.last_name = this.full_name.split('')[1];
} else {
this.first_name = '未知';
this.last_name = '未知';
}
}
}
})
</script>
二.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属性，是样式组件化
"""
<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中完成
"""
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文件中的 <router-view />占位符
// 3）用redirect配置来实现路由的重定向
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/home',
redirect: '/', // 路由的重定向
},
{
path: '/about',
name: 'About',
component: About
},
{
path: '/first',
name: 'First',
component: First
}
];
根组件占位渲染页面组件
<!--
1）App.vue是项目的根组件，是唯一由main.js加载渲染的组件，就是替换index.html页面中的<div id="app"></div>的占位标签
2）实际开发中App.vue文件中，只需要书写下方五行代码即可（可以额外增加其他代码）
3）router-view是一个占位标签，由router插件控制，可以在router的配置文件中进行配置
4）router-view就是根据router在index.js中配置的路由关系被 指定路径 匹配 指定页面组件 渲染
router-view或被不同的页面组件替换，就形成了页面跳转
-->
<template>
<div id="app">
<!-- 前台路由占位标签，末尾的/代表单标签的结束 -->
<router-view />
</div>
</template>
页面组件渲染小组件（重点）
页面组件作为父组件：views/*.vue
<template>
<div class="home">
<!-- vue项目下的html是支持大小写，且区分大小写 -->
<Nav />
</div>
</template>
<script>
// 父组件加载子组件：父组件通常是页面组件，是被一个个小组件这些子组件组装成的页面
// 1）导入语法要在 export default{} 之上完成
// 2）@符合标识 项目src文件夹 绝对路径
// 3）要在export default{} 的括号中用 components 注册
// 4）在该组件的模板中就可以渲染子组件了(html代码中是区别大小写的)
// 5）步骤：i）导入子组件 ii）注册子组件 iii）使用子组件
import Nav from '@/components/Nav'
export default {
components: {
Nav,
}
}
</script>
<style scoped>
.home {
100vw;
height: 100vh;
background-color: orange;
}
</style>
导航栏小组件(封装路由跳转)：components/*.vue
<template>
<div class="nav">
<img src="" />
<ul>
<li>
<!-- router控制的路由，不是用a标签完成跳转：
1）a标签会刷新页面，错误的
2）router-link标签也能完成跳转，且不会刷新页面，就是router提供的a标签(最终会被解析为a标签，还是用a来控制样式)
3）router-link标签的to属性控制跳转路径，由两种方式
i) to="路径字符串"
ii :to="{name: '路由名'}"
-->
<a href="/">主页</a>
</li>
<li>
<router-link to="/about">关于页</router-link>
</li>
<li>
<!-- to="字符串"，v-bind:to="变量"，可以简写为 :to="变量" -->
<router-link :to="{name: 'First'}">第一页</router-link>
</li>
</ul>
</div>
</template>
<style scoped>
.nav {
100%;
height: 80px;
background: rgba(0, 0, 0, 0.3);
}
img {
200px;
height: 80px;
background: tan;
float: left;
}
ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
height: 80px;
background: pink;
}
ul li {
float: left;
height: 80px;
padding: 30px 20px 0;
}
a {
color: black;
}
</style>