一.复习
基本列表
<ul>
<li v-for="(p,index) in persons" :key="index">{{p.name}} {{index}}
</li>
</ul>
<ul>
<li v-for="(value,k) in car" :key="k">{{k}}--{{value}}</li>
</ul>
</div>
</body>
<script>new Vue({
el:'.root1',
data:{
//遍历数组
persons:[
//数据有顺序用数组存
//每个人是个对象
{ id:'001',name:'张三'},
{ id:'002',name:'张三'},
{ id:'003',name:'张三'}
],
//遍历对象
car:{
name:'aodi',
price:'1200',
color:'pink'
}
}
})
列表过滤
new Vue({
el:'.root1',
data:{
keyword:'',
persons:[
{ id:'001',name:'马冬梅',age:19},
{ id:'002',name:'周冬雨',age:19},
{ id:'003',name:'周杰伦',age:19},
{ id:'003',name:'温兆伦',age:19}
]
},
computed:{
filpersons(){
//将过滤出的数据返回
return this.persons.filter((p)=>{
//过滤出包含关键字的数据
return p.name.indexOf(this.keyword)!== -1
})
}
}
})
姓名案例
计算属性
<div class="root1">
姓: <input type="text" v-model="firstName">
名:<input type="text" v-model="lastName">
全名:{{fullName}}
</div>
</body>
<script>
new Vue({
el:'.root1',
data:{
firstName:'张',
lastName:'三'
},
computed:{
//不需要在数据里配置fullname属性 是计算出来的
//执行完往vm上放了个fullname的属性
fullName(){
//读取fullname时会调用get 初次读取还有数据被修改时被调用
//简写相当于fullname()变为了getter使用
return this.firstName+this.lastName
}
}
})
</script>
methods
<div class="root1">
姓: <input type="text" v-model="firstname">
名:<input type="text" v-model="lastname">
<!-- 必须加括号 是函数的返回值展示 -->
全名:{{fullname()}}
</div>
</body>
<script>
new Vue({
el:'.root1',
data:{
firstname:'张',
lastname:'三'
},
methods:{
//函数
fullname(){
//手动调用 插值语法 需要展示返回值 需要写return
return this.firstname+this.lastname
}
}
})
</script>
条件渲染
<div class="root1">
<h2>当前n的值为:{{n}}</h2>
<button @click="n++">点我n加一</button>
<div v-show="false"> 1234 </div>
<div v-if="false"> 1234 </div>
<div v-if="n==1">n的值是1</div>
<!--if执行完后不看else if 即使else-if条件为真-->
<div v-else-if="n==1">n的值是2</div>
<div v-else-if="n==3">n的值是3</div>
<!-- v-else 前面条件均不成立 则执行 不需要写条件-->
<div v-else></div>
<!-- v-if 只能和template配合使用 页面渲染的时候 template消失 不影响只有h2的结构-->
<template >
<h2>哈哈</h2>
<h2>哈哈</h2>
<h2>哈哈</h2>
</template>
</div>
</body>
<script>
new Vue({
el:'.root1',
data:{
name:'张三',
n:0
}
})
</script>
二.尚品汇
1-7
(1)准备
1.1:node + webpack + VScode + git
2)脚手架使用
2: vue init webpack 项目的名字
3|4:vue create 项目名称
脚手架目录:public + assets文件夹区别
node_modules:放置项目依赖的地方
public:一般放置一些共用的静态资源,打包上线的时候,public文件夹里面资源原封不动打包到dist文件夹里面
src:程序员源代码文件夹
-----assets文件夹:经常放置一些静态资源(图片),assets文件夹里面资源webpack会进行打包为一个模块(js文件夹里面)
-----components文件夹:一般放置非路由组件(或者项目共用的组件)
App.vue 唯一的根组件
main.js 入口文件【程序最先执行的文件】
babel.config.js:babel配置文件
package.json:看到项目描述、项目依赖、项目运行指令
README.md:项目说明文件
3)脚手架下载下来的项目稍微配置一下
3.1:浏览器自动打开
在package.json文件中
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
3.2关闭eslint校验工具
创建vue.config.js文件:需要对外暴露
module.exports = {
lintOnSave:false,
}
3.3 src文件夹的别名的设置
因为项目大的时候src(源代码文件夹):里面目录会很多,找文件不方便,设置src文件夹的别名的好处,找文件会方便一些
创建jsconfig.json文件
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
}
},
"exclude": [
"node_modules",
"dist"
]
4)路由的配置
vue-router
路由分为KV
前端路由:
K即为URL(网络资源定位符)
V即为相应的路由组件
(5)
5.1路由的一个分析
确定项目结构顺序:上中下 -----只有中间部分的V在发生变化,中间部分应该使用的是路由组件
2个非路由组件|四个路由组件
两个非路由组件:Header 、Footer
路由组件:Home、Search、Login(没有底部的Footer组件,带有二维码的)、Register(没有底部的Footer组件,带二维码的)
5.2安装路由
cnpm install --save vue-router
--save:可以让你安装的依赖,在package.json文件当中进行记录
5.3创建路由组件【一般放在views|pages文件夹】
5.4配置路由,配置完四个路由组件
6)创建非路由组件(2个:Header、Footer)
非路由组件使用分为几步:
第一步:定义
第二步:引入
第三步:注册
第四步:使用
项目采用的less样式,浏览器不识别less语法,需要一些loader进行处理,把less语法转换为CSS语法
1:安装less less-loader@6
2:需要在style标签的身上加上lang="less",不添加样式不生效