01 vue 和 element 的绑定
一个初始的html中,引用vue的cdn,创建一个vue实例
首先需要在vue实例中是使用el来绑定div元素
这样才能实现以后的数据双向绑定
知识点
el 就是 element 既元素 ,表示要绑定的元素
{{}}数据绑定表达式 之所以叫表达式 是因为里面还可以进行加减拼接计算等js的表达式
<div id="app">
<p>{{Array}}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
Array: "重新复习Vue"
}
})
</script>
02 v-bind 数据绑定 和 v-on 事件绑定
在vue中使用v-bind绑定数据,使用v-on绑定事件
知识点
v-bind 可以直接使用 ==:==来代替
v-on 可直接使用==@==来代替
v-bind绑定的数据不用=={{}}==
v-on 绑定的事件也不用==( )==
<body>
<div id="app">
<img v-bind:src="url">
<button v-on:click="say">点击</button>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
url: "img/1.png"
},
methods: {
say() {
alert("hello word!")
}
},
})
</script>
03 methods中的 this指向
methods中 this 指向vue实例,所以可以直接访问到data里的属性
这里就可以修改url的值 进行图片地址的修改
<body>
<div id="app">
<img :src="url">
<button @click="change">点击</button>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
url: "img/1.png"
},
methods: {
change() {
this.url = "img/b.png"
}
},
})
</script>
##04 创建vue 脚手架项目
当你有安装过node环境后,可以使用npm node自带的包管理工具,下载vue/cli 也就是vue的脚手架,使用它可以帮助我们快速搭建一个vue项目
npm install @vue/cli -g(全局安装)
vue create 项目名字 创建vue3项目
npm run serve vue3项目启动命令
默认配置文件
node_modules 依赖
public 静态文件
src 主文件
package.json 记录依赖 和 部分命令配置
另外知识
vue中采用es6的规范 使用import 和export
而后台node中采用 common.js 的规范 使用 require 和 exports
main.js
Vue.config.productionTip = false //配置开发选项 友好的错误提示 改为true 则无报错 一般上线时会改为true
new Vue ({
render:h=>(app),
}).$mount("#app")
这个 mount 的意思是挂载到 public 中的index.html 中 div 的id ,它是cli底层文件自动配置的
render:h=>(app)
其实就是
render(h){
return h(app)
}
详细一点
render(createElement){
return createElement(app)
}
其实就是把src中 app.vue单文件组件渲染到mount中的#app中
从而在html文件中加载 app.vue单文件组件
在单文件组件中 我们的data也跟之前引入vuejs不一样
cli之后我们是在node环境中
所以要使用
data(){
return {
array:"复习vue"
}
}
05 v-if 和 v-show
知识点
v-if 和 v-show自带 数据绑定 不用再加 :
v-if 和 v-show 的区别
v-if 完全消失 docment 节点元素都没有了
而 v-show 只是不展示 代码里还是有的
<div id="app">
<h1 v-if="true">小米</h1>
<h1 v-show="isLogin">小红</h1>
</div>
</body>
<script>
new Vue({
el: "#app ",
data() {
return {
isLogin: false
}
}
})
</script>
06 v-for
v-for 可以遍历数组,同样不用==:==绑定
v-for 可以用 in 遍历 也可以用 of 遍历
V-for循环遍历数组时推荐使用of,语法格式为(item,index)
- item:迭代时不同的数组元素的值
- index:当前元素的索引
for循环遍历对象时推荐使用in,语法格式为(item,name,index)
-
item:迭代时对象的键名键值
-
name:迭代时对象的键名
-
index:当前元素的索引
记得绑定 ==🔑==值 保证唯一性 使之不用缓存
<body>
<div id="app">
<ul>
<li v-for="(item,index) in array" :key="index">
{{item}}
</li>
</ul>
</div>
</body>
<script>
new Vue({
el: "#app ",
data() {
return {
array: ["张三", "李四", "王五", "赵六"]
}
}
})
</script>
07组件引入
通过下面代码既可知 注册一个vue组件 导出后可在另一个vue实例中复用
//第一个组件
<template id="temp">
<div>
{{array}}
</div>
</template>
<script>
export default{
name:"bpp",
data() {
return {
array:"组件注册"
}
}
}
</script>
<template>
<div id="app">
<bpp></bpp>
</div>
</template>
<script>
import bpp from './components/bpp.vue'
export default {
name: 'App',
components: {
bpp
}
}
</script>
08 组件数据传递
1.父传子——通过props传值
实际上父传子 就是通过在 父级组件使用中传自定义属性,子级通过关键字props 来接收使用
知识点
注意是键值对传值 父级传一个自定义属性 属性值为data数据 子级接收的和使用的都是属性名的值
注意 props 的格式 是一个数组 数组里是传过来的属性名
注意 props是一个单独的模块 不在data 里 也不在方法里
注意 父传子的属性名前要加 : v-bind
//子组件 child
<template>
<div>
<p>{{data}}</p>
</div>
</template>
<script>
export default {
name:"child",
props: ['data'],
}
</script>
//父组件
<template>
<div id="app">
<child :data="childdata"></child>
</div>
</template>
<script>
import child from "./components/chid.vue"
export default {
name: 'App',
components: {
child
},
data() {
return {
childdata:"abcdefg"
}
}
}
</script>
2.子传父——通过 this.$emit传值
原理是 子集可以通过 this.$emit 访问到父级的自定义方法,并传值。
父级通过自己的自定义方法获得子级传来的值并储存到data中
知识点
父级通过自定义事件传值 需要在div中的子组件上定义一个自定义事件,并把事件的值写为一个普通事件
子级通过调用this.$emit方法时 记得方法名为父级的自定义事件名 并且记得加==“”==号
//子组件
<template>
<div>
<button @click="setchild" >点击获取父组件值</button>
</div>
</template>
<script>
export default {
name: "child",
data() {
return {
childdata: "child data",
};
},
methods: {
setchild() {
this.$emit("myevent", this.childdata);
},
},
};
</script>
//父组件
<template>
<div id="app">
<child @myevent="getchild"></child>
<p>{{getchilds}}</p>
</div>
</template>
<script>
import child from "./components/chid.vue"
export default {
name: 'App',
components: {
child
},
data() {
return {
getchilds:''
}
},
methods: {
getchild(data){
this.getchilds = data
console.log(data)
}
},
}
</script>
09 计算属性和监听器
1.计算属性 computed
计算属性就是一些数据处理 放在computed中
直接当做普通属性调用不加括号
任何data中数据变化立即重新计算
计算属性会缓存
<template>
<div>
<p>姓名:{{ name }}</p>
</div>
</template>
<script>
export default {
data() {
return {
fristname: "张",
lastname: "三",
};
},
computed: {
name() {
return this.fristname + lastname;
},
},
};
</script>
2.监听器 watch
监听器 中的方法 为data中的变量名 ,括号中的返回值为变量名修改后的值
一般当一个值引起多个值改变的时候用监听器
多个值引起一个值改变时用computed
<template>
<div>
<p>单价:{{ armb }}</p>
<div>
<button @click="change(1)">-</button>
<p>数量:{{ age }}</p>
<button @click="change(2)">+</button>
</div>
<P>总价:{{ all }}</P>
</div>
</template>
<script>
export default {
data() {
return {
armb: 20,
age: 0,
all: 0,
};
},
methods: {
change(m) {
console.log(m);
if (m == 2) {
this.age++;
} else {
this.age--;
}
},
},
watch: {
age(age) {
this.all = this.armb * age;
},
},
};
</script>
10 生命周期
在创建每一个==.vue==文件也就是每一个vue实例时,都会加载一些函数。这些函数就是vue的生命周期,下面这张图描绘了vue的生命周期。
常用的周期函数
created() 初始化完成时
mounted() 模板创建完成时
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IgOzdNyn-1648533234530)(D:\杂杂碎碎\桌面\webp)]
11 插槽
1.插槽的基本使用
创建一个父子组件,在子组件中写==,父组件使用子组件时,slot位置写的东西就会替换,简单来说,插槽就是起到一个占坑==的作用。
//home.vue父组件
<test>
Hello Word
</test>
//test.vue子组件
<a href="#">
<slot></slot>
</a>
注意
父级模板里的所有内容都是在父级作用域中编译的;
子模板里的所有内容都是在子作用域中编译的;
也就是说在父组件中要替换插槽的内容可以使用父组件的数据方法
默认内容
可以在子组件的插槽中加入默认的内容,如果父组件中没有写插槽内容,则显示默认的内容
###2.具名插槽
当我们一个组件中需要多个插槽时,这个时候我们就需要给每个插槽加上他们自己的名字以区别,如果一个插槽不加name的话,那它的name默认为default。
当使用具名插槽时,需要父组件使用====,并在上面使用
v-slot来绑定子组件的插槽名。
完整的写法为====
//子组件
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
//父组件
<div>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here some contact info</p>
</template>
</div>
3.作用域插槽
在父组件中可以直接使用父组件的数据,但当我们需要在插槽中使用子组件的数据时,我们
可以在子组件的插槽中绑定一个属性,值为子组件的数据。在父组件中组件名中使用
v-slot:name=“传参”,使用传参.子组件数据就可以使用子组件的值了。
//子组件
//test.vue
<div>
<!-- 设置默认值:{{user.lastName}}获取 Jun -->
<!-- 如果home.vue中给这个插槽值的话,则不显示 Jun -->
<!-- 设置一个 usertext 然后把user绑到设置的 usertext 上 -->
<slot v-bind:usertext="user">{{user.lastName}}</slot>
</div>
//定义内容
data(){
return{
user:{
firstName:"Fan",
lastName:"Jun"
}
}
}
//父组件
//home.vue
<div>
<test v-slot:default="slotProps">
{{slotProps.usertext.firstName}}
</test>
</div>
当插槽只有一个时,我们也可以忽略插槽的名字直接使用
//父组件
//home.vue
<div>
<test v-slot="slotProps">//这里
{{slotProps.usertext.firstName}}
</test>
</div>
4 v-slot 语法糖
跟 v-on
和 v-bind
一样,v-slot
也有缩写,即把参数之前的所有内容 (v-slot:)
替换为字符 #
。例如 v-slot:header
可以被重写为 #header
原来写法
<div>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here some contact info</p>
</template>
</div>
语法糖写法
<div>
<template #header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template #footer>
<p>Here some contact info</p>
</template>
</div>
12 表单双向绑定 v-model
在表单上使用v-model="数据"
可以使表单和数据进行双向绑定。不深入学习的话也只有这些内容。
下面是v-model配合一些方法使用
<div id="app">
<!-- 1、lazy:可以不用实施刷新,等到按回车在刷新 -->
<input type="text" v-model.lazy='a'>
<h2>{{a}}</h2>
<!-- 2、number:由于输入框不管输入什么都会自动改为字符串,
所以就想变成数字就加一个number -->
<input type="text" v-model.number='b'>
<h2>{{b}}-{{typeof b}}</h2>
<!-- 3、trim:就是会去除输入的空格啥的 -->
<input type="text" v-model.trim='c'>
<h2>你的名字:{{c}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>
const app = new Vue({
el:'#app',
data:{
a:1,
b:1,
c:1
}
})
</script>
13 Router 路由
先用命令行安装router npm install router vue-router --save
在index.js里面配置
//router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes=[
]
const router =new VueRouter({
routes,
mode:'history'//链接没有#的模式
})
export default router
// main.js
router import router from './router'
new Vue({
router //这里加入router
)
14 axios 网络请求
安装 axios npm install --save axios vue-axios
use使用
vue-axios是按照vue插件的方式去写的。那么结合vue-axios,就可以去使用vue.use方法了
首先在主入口文件main.js中引用
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);
getNewsList(){
this.axios.get('api/getNewsList').then((response)=>{
this.newsList=response.data.data;
}).catch((response)=>{
console.log(response);
})
}
原型挂载使用
import axios from 'axios'
Vue.prototype.$axios= axios
this.$axios.get('api/getNewsList').then((response)=>{
this.newsList=response.data.data;
}).catch((response)=>{
console.log(response);
})