目录
昨日内容
"""
1、表单指令：
v-model="变量" 变量与value有关
普通：变量就代表value值
单选框：变量为多个单选框中的某一个value值
单一复选框：变量为布尔，代表是否选中
多复选框：变量为数组，存放选中的选项value
2、条件指令：
v-show: display:none
v-if: 不渲染
v-if | v-else-if | v-else
前者条件成立，就不管之后分支，当所有条件都不成功，才执行v-else分支
3、循环指令：
v-for="(v, i) in str|arr"
v-for="(v, k, i) in dic"
v:值 k:键 i:索引
4、sessionStorage | localStorage
sessionStorage：生命周期同所属标签(标签关闭被销毁)
localStorage：永久保存
localStorage.key = value
localStorage.clear()
5、分隔符：delimiters: ['[{', '}]'],
6、过滤器：
{{ n1, n2 | f1(30) | f2 }}
filters: {
f1(n1,n2,n3) {return 过滤结果},
f2(f1的res) {return 过滤结果},
}
7、计算属性：
result必须渲染；绑定的方法内部出现的变量更新方法被调用；方法返回值是result的值；result不能在data中重复定义
computed: {
result() {
// 一个方法属性值依赖于多个变量
return this.n1 + this.n2;
}
}
8、监听属性：
监听属性属性更新方法被调用；方法参数为被监听属性当前值，上一次值；多个变量依赖一个变量
watch: {
full_name(n, o) {
this.first_name = n.split('')[0]
this.last_name = n.split('')[1]
}
}
9、冒泡排序：
for (let i=0; i<arr.length-1; i++) { // 趟数
for (let j=0; j<arr.length-1-i; j++) { // 比较次数
// 处理条件即可
if (arr[j]参数 > stus[j + 1]参数) {
let temp = stus[j];
stus[j] = stus[j + 1];
stus[j + 1] = temp;
}
}
}
"""组件
1.概念
html,css与js的集合体,为该集合体命名,用该名字复用html,css与js组成的集合体 ==> 复用性
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：
2.组件分类
- 根组件
new Vue()生成的组件 - 局部组件
组件名 = {}, { } 内部采用的是vue语法 - 全局组件
vue.component('组件名',{}), { }内部采用的是vue语法
特点
组件都有管理组件html页面结果的
template实例成员,template中有且只有一个根标签根组件都是作为最顶层父组件,局部与全局组件作为子组件,也可以成为其他局部与全局组件的父组件
子组件的数据需要隔离(数据组件化,每一个组件拥有自己数据的独立名称空间)
局部组件必须注册后才能使用,全局组件不需要注册(使用局部变量省内存)
组件中出现的所有变量(模板中,逻辑中),都由该组件自己提供管理
局部,全局和根组件都是一个vue实例,一个实例对相应一套html,css,js结构,所以实例就是组件
根组件
挂载点el本质是被组件template模块进行替换的占位符
- 根组件,可以不确定template,template默认采用挂载点页面结构
- 如果设置的template,挂载点内部的内容无效,因为会被替换掉
- html,body标签不能被替换,所以不能作为挂载点
使用new Vue来定义根组件
在template 中定义文本
<script>
new Vue({
el:'#app',
data:{
msg:'组件信息'
},
template:'<p>你好{{ msg }}</p>'
})
</script>局部组件
局部组件要在其父组件中注册才能使用
- 声明组件 template
- 注册组件 components
- 渲染组件 直接在页面中写
<div id="app">
<div class="warp">
<zujian></zujian>
</div>
</div>
<script>
// 声明局部组件
// 1.声明组件 2.注册组件 3. 渲染组件
let zujian = {
template:`
<div class="box">
<img src="img/1.jpg" alt="">
<h2>美女</h2>
</div>
`
};
new Vue({
el:'#app',
data:{},
// 注册组件
components:{
// 组件注册时,可以直接写组件名
zujian
}
})
</script>解耦合
components 注册(注册是小写)
对应使用-来替换驼峰体的变量全局组件
Vue.component('组件名',{"语法组件"})- 使用
template定义语法组件 - 全局组件不需要注册
// 全局组件
<quanju></quanju>
Vue.component('quanju',{
template:`
<div class="box">
<img src="img/2.jpg" alt="">
<h2>美女</h2>
</div>
`
});3.组件传参
组件数据的局部化
- 函数产生局部作用域,进行组件化
data(){} - 一个组件可能会被复用多次,每个组件都有应该有自己独立的变量名称空间
- 数据需要组件化,作为方法的返回值(方法执行后会产生一个局部作用域)
// 声明局部组件
// 绑定了点击事件
let zujian = {
template:`
<div class="box" @click="fn">
<img src="img/1.jpg" alt="">
<h2>锤了美女{{ count }}下</h2>
</div>
`,
// 函数产生局部作用域,进行组件化
// 一个组件可能会被复用多次,每个组件都有应该有自己独立的变量名称空间
data(){
return{
count:0,
}
},
// 数据需要组件化,作为方法的返回值(方法执行后会产生一个局部作用域)
methods:{
fn(){
this.count++;
}
}
};父传子
- 传值时,自定义属性前加
:是变量,不加直接传值 - 子组件可以通过props自定义组件属性(采用反射机制,需要填写字符串,但是使用时可以直接当做变量)
- 子组件会在父组件中渲染,渲染时,将父组件的变量绑定给子组件的自定义属性,可以将变量值传递给子组件
传值
// 加":"传变量 :abc="m" 传变量m , xyz="123"传的普通字符串
<zujian v-for="m in meinv" :abc="m" xyz="123"></zujian>
取值
let zujian = {
// 接收变量
props:['abc','xyz'],
template:`
<div class="box" @click="fn">
<img :src="abc.img" alt="">
<h2>锤了{{ abc.name }}{{ count }}下</h2>
<!--<h3>{{ abc }}</h3> 必须是 :src,才能接收变量-->
</div>
`,子传父
利用自定义方法来获取子组件的数据,this.$emit('自定义事件名',触发事件回调的参数们)
自定义组件标签的事件
事件是属于子组件的,子组件在父组件中渲染并绑定事件方法,所以事件方法来由父组件实现
子组件如何触发自定义事件:
this.$emit('自定义事件名',触发事件回调的参数们)子组件触发自定义事件,携带出子组件的内容,在父组件中实现 自定义事件的方法,拿到子组件传递给父组件的信息
触发自定义事件在自组件内部完成,触发自定义绑定方法是在父组件实现,在触发的过程中,将子组件参数带出来,父组件中完成逻辑
<!--点击提交按钮进行修改标题-->
<tag @action="actionfn"></tag>
methods:{
changetitle(){
if (this.t1 && this.t2){
// 触发父事件 $emit('事件名',携带的参数)
this.$emit('action',this.t1,this.t2);
this.t1 = '';
this.t2 = '';
}代码实现标题的改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子传父</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="app">
<h1>{{ h1 }}</h1>
<h2>{{ h2 }}</h2>
<!--点击提交按钮进行修改标题-->
<tag @action="actionfn"></tag>
<br>
<hr>
<br>
<!--随时修改自动跟随标题-->
<tag2 @h1a="afn1" @h2a="afn2"></tag2>
</div>
</body>
<script src="vue/vue.js"></script>
<script>
let tag={
template:`
<div>
<input type="text" v-model="t1">
<input type="text" v-model="t2">
<button @click="changetitle"> 修改标题 </button>
</div>
`,
data(){
return {
t1:'',
t2:'',
}
},
methods:{
changetitle(){
if (this.t1 && this.t2){
// 触发父事件 $emit('事件名',携带的参数)
this.$emit('action',this.t1,this.t2);
this.t1 = '';
this.t2 = '';
}
}
}
};
let tag2={
template:`
<div>
修改主标题:<input type="text" v-model="t1" @input="t1fn">
修改副标题:<input type="text" v-model="t2" @input="t2fn">
</div>
`,
data(){
return {
t1:'',
t2:'',
}
},
methods:{
// 使用子传父的实现
t1fn(){
this.$emit('h1a',this.t1)
},
},
// 利用监听来改变
watch:{
t2(){
this.$emit('h2a',this.t2)
}
}
};
// 父组件
new Vue({
el:'#app',
data:{
h1:'主标题',
h2:'副标题',
},
components:{
tag,
tag2
},
methods:{
actionfn(a,b){
this.h1 =a;
this.h2 =b;
},
afn1(a){
if (!a){
this.h1='主标题';
this.h2='子标题';
return;
}
this.h1=a;
},
afn2(a){
if (!a){
this.h1='主标题';
this.h2='子标题';
return;
}
this.h2=a;
}
}
})
</script>
</html>作业
"""
1、按照上方 知识点总结 模块，总结今天所学知识点；
2、有以下广告数据（实际数据命名可以略做调整）
ad_data = {
tv: [
{img: 'img/tv/001.png', title: 'tv1'},
{img: 'img/tv/002.png', title: 'tv2'},
{img: 'img/tv/003.png', title: 'tv3'},
{img: 'img/tv/004.png', title: 'tv4'},
],
phone: [
{img: 'img/phone/001.png', title: 'phone1'},
{img: 'img/phone/002.png', title: 'phone2'},
{img: 'img/phone/003.png', title: 'phone3'},
{img: 'img/phone/004.png', title: 'phone4'},
]
}
i) 有两个大标题，电视和手机，点击对应的标题，渲染对应的数据
ii) 一个字典作为一个显示单位，定义一个子组件进行渲染（涉及父子组件传参）
3、在第2题基础上，页面最下方有一个 h2 标签，用来渲染用户当前选择的广告（点击哪个广告就是选中哪个广告）
i）当没有点击任何广告，h2 标签显示：未选中任何广告
ii）当点击其中一个广告，如tv1，h2 标签显示：tv1被选中
"""Vue项目环境的搭建
Vue项目环境搭建
"""
node ~~ python：node是用c++编写用来运行js代码的
npm(cnpm) ~~ pip：npm是一个终端应用商城，可以换国内源cnpm
vue ~~ django：vue是用来搭建vue前端项目的
1) 安装node
官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/
2) 换源安装cnpm
>: npm install -g cnpm --registry=https://registry.npm.taobao.org
3) 安装vue项目脚手架
>: cnpm install -g @vue/cli
注：2或3终端安装失败时，可以清空 npm缓存 再重复执行失败的步骤
npm cache clean --force
"""
Vue项目创建
1) 进入存放项目的目录
>: cd ***
2) 创建项目
>: vue create 项目名
3) 项目初始化
pycharm配置并启动vue项目
1) 用pycharm打开vue项目
2) 添加配置npm启动
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文件)
# 1) template：有且只有一个根标签
# 2) script：必须将组件对象导出 export default {}
# 3) style: style标签明确scoped属性，代表该样式只在组件内部起作用(样式的组件化)<template>
<div class="test">
</div>
</template>
<script>
export default {
name: "Test"
}
</script>
<style scoped>
</style>全局脚本文件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
new Vue({
el: '#app',
router,
store,
render: function (readFn) {
return readFn(App);
},
});
Vue基础总结
"""
组件：
组件概念：vue实例就是组件
根组件、局部组件、全局组件
组件传参：
父传子：自定义组件属性
子传父：自定义组件事件
实例成员：
el、data、methods、computed、watch、filters、delimiters、props、template、components
指令：
{{}}、v-text、v-html、v-once、v-on、v-model、v-bind、v-if、v-show、v-else-if、v-else、v-for、v-cloak
"""