1.基本应用
案例；给a连接动态绑定地址，基础示例：属性值动态，更高级案例：点击按钮切换链接地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本应用</title>
<script type="text/javascript" src="/js/vue.global.prod.js"></script>
</head>
<body>
<div id="app">
<a v-bind:href="link" target="_blank">大力出奇迹</a>
</div>
</body>
</html>
<script type="text/javascript">
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup(){
//定义的数据
const data = reactive({
link:
'https://www.baidu.com'
})
//定义的数据和方法都需要return返回
return {
...toRefs(data)}
}
}).mount('#app')
</script>
运行结果：
2.语法糖
语法糖就是vue提供的简化写法，对于v-bind可以直接：属性即可
<a v-bind:href="link" target="_blank">大力出奇迹</a>
3.绑定class类
实际变成中也会出现很多使用脚本操作标css类，类似之前大家学习jQuery中的.addclass(,Vue中同样有类操作
案例: 通过v-bind绑定的单个css类、多个css类
4.绑定style样式
我们也可以使用v-bind: style来绑定一些css内联样
式，对象形式语法 : styler{属性名: 属性值，属性
名: 属性值}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绑定class类</title>
<style>
.xx {
width: 100px;
height: 100px;
background-color: darkcyan;
}
.ww {
border-radius: 10px;
}
</style>
</head>
<body>
<div id="app">
<!-- 单个css-->
<div :class="xxclass"></div>
<div :class="{xx:true}"></div>
<!-- 多个-->
<div :class="{xx:true,ww:true}"></div>
<!-- 定义成方法-->
<div :class="classMethodTest()"></div>
</div>
</body>
</html>
<script type="text/javascript" src="/js/vue.global.prod.js"></script>
<script type="text/javascript">
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup() {
//定义的数据
const data = reactive({
xxclass: 'xx',
wwclass: 'ww'
})
const classMethodTest = () =>{
return {
xx:true,ww:true}
}
//定义的数据和方法都需要return返回
return {
...toRefs(data).classMethodTest}
}
}).mount('#app')
</script>
5.计算属性
1.什么是计算属性
计算属性：可以理解为能够在里面写一些计算逻辑的属性。
作用：1.减少模板中的计算逻辑。
2.数据缓存。当我们的数据没有变化时，不再执行计算过程。
3.依赖固定的数据类型（响应式数据），不能是普通的传入的一个全局的数据
2.计算属性和方法
值不是直接渲染到页面，也是通过计算后在苏安然到页面，可以使用计算属性computed
1.methods中的方法在模板中被调用，如果这个方法依赖data，data的值发生了变化，这个方法就会重新执行；计算属性也具备这个特性。保证data中数据与页面中显示的数据保持一致！
2.计算属性计算出来的结果会被缓存起来，下次无需计算直接显示，而方法不是，每次调用都会重新执行。
3.修改计算属性的值
直接修改计算属性的值报错，Computed property “num2” was assigned to but it has no setter.在computed中定义get和set方法，在修改计算属性中的值
4.计算属性的配置
1.get()：必须要写，该函数不接受参数
2.get()什么时候被调用?：当初次读取计算属性或者计算属性所依赖的数据发生变化时被调用，getter函数有一个返回值，该返回值就是计算属性的值
3.set()：可选项，接受一个可选参数（计算属性被修改之后的值）
4.set()什么时候被调用?： 当计算属性被修改时被调用
5.get()和 set()中出现的this执向vm
<template>
<div class="compute">
<p>修改计算属性的值</p>
<h4>num: <span v-text="num"></span></h4>
<h4>计算属性num2: <span v-text="num2"></span> </h4>
<button class="btn" @click="change">改变计算属性的值</button>
</div>
</template>
<script>
export default {
name:'compute',
data(){
return{
num:100
}
},
computed:{
// num2不是函数
num2:{
// 当计算属性要修改时先触发set方法
// 读取当前计算属性的值，get方法可以隐藏，默认进入的是get方法
get:function(){
return this.num*2-10
},
set:function(val){
this.num = val;
console.log('val',val)
}
}
},
methods:{
change(){
// 直接修改计算属性的值报错，Computed property "num2" was assigned to but it has no setter.
this.num2=60;
}
}
}
</script>
<style lang="less" scoped>
.compute{
.btn{
width: 130px;
height: 37px;
background: #fff;
border-style: none;
border: 1px solid #333;
border-radius: 4px;
&:hover{
background: #42c5e6;
color: #fff;
}
}
}
</style>
<!-- <ul>
<li v-for="item in users.filter(u=>u.gender=='male')">
{
{item}}
</li>
</ul> -->
<button @click="gender='male'">男生</button>
<button @click="gender='female'">女生</button>
<ul>
<li v-for="item in userFilter">
{
{item}}
</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
message:"hello world",
users:[
{id:1,name:"terry",gender:"male"},
{id:2,name:"larry",gender:"male"},
{id:3,name:"vicky",gender:"female"},
{id:4,name:"lucy",gender:"female"},
{id:5,name:"tom",gender:"male"},
],
//默认值，默认情况显示男生
gender:"male"
},
//computed是一个计算属性，调用里面的方法不用加过好，直接用reverseMessage
computed:{
reverseMessage(){
console.log("computed-reverseMessage"+Math.random())
return this.message.split("").reverse().join("")
},
//过滤
//u=>u.gender===this.gender 箭头函数
userFilter(){
//当this.users以及this.gender发生变化的时候，计算属性会重新执行计算出新的结果然后渲染到页面中。
return this.users.filter(u=>u.gender===this.gender)
}
},
created(){
setTimeout(()=>{
this.message += "hello world"
},2000)
},
methods:{
reverseMsg(){
console.log("methods-reverseMsg"+Math.random())
return this.message.split("").reverse().join("")
}
}
})
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
<script type="text/javascript" src="/js/vue.global.prod.js"></script>
</head>
<body>
<div id="app">
{
{chineseName.length > 0 ? "有中文名":"没有"}}
</div>
</body>
</html>
<script type="text/javascript">
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup(){
//定义的数据
const data = reactive({
chineseName:["李小屁","小鬼"]
})
//定义的数据和方法都需要return返回
return {
...toRefs(data)}
}
}).mount('#app')
</script>
实例截图：
但是如果在模板中写的太多逻辑，会让模板变得臃肿，难以维护，因此我们可以使用计算属性conputed（）方法来描述依赖响应式状态的复杂逻辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
<script type="text/javascript" src="/js/vue.global.prod.js"></script>
</head>
<body>
<div id="app">
{
{c}}
</div>
</body>
</html>
<script type="text/javascript">
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs,computed} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup() {
//定义的数据
const data = reactive({
chineseName: ["李小屁", "小鬼"]
})
const c = computed(() =>
data.chineseName.length > 0 ? '有名字' : '没名字');
//定义的数据和方法都需要return返回
return {
...toRefs(data), c}
}
}).mount('#app');
</script>
示例：
那么往往在书写的时候大部分开发者更熟悉方法的熟书写，那么方法的书写和计算属性的区别到底是什么？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
<script type="text/javascript" src="/js/vue.global.prod.js"></script>
</head>
<body>
<div id="app">
{
{c}}
{
{m()}}
</div>
</body>
</html>
<script type="text/javascript">
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs,computed} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup() {
//定义的数据
const data = reactive({
chineseName: ["李小屁", "小鬼"]
})
const c = computed(() =>
data.chineseName.length > 0 ? '有名字' : '没名字');
//普通方法
const m = () => {
return data.chineseName.length > 0 ?'有名字':'没名字'
}
//定义的数据和方法都需要return返回
return {
...toRefs(data), c,m}
}
}).mount('#app');
</script>
计算属性和方法的区别
1，计算属性本质上是包含getter和setter的方法。
当获取计算属性时，实际上是在调用计算属性的getter方法，vue会收集计算属性的依赖，并缓存计算属性的返回结果，只有当依赖变化后才会进行重新计算。
2，方法没有缓存，每次调用方法都会导致重新执行。
3，计算属性的getter和setter参数固定，getter没有参数，setter只有一个参数，而方法的参数不限。
4，由于有以上的这些区别，因此计算属性通常是根据已有数据得到其他数据，并在得到数据的过程中不建议使用异步、当前时间，随机数等副作用操作。
5，实际上，他们最重要的区别是含义上的区别，计算属性含义上也是一个数据，可以读取也可以赋值，方法含义上是一个操作，用于处理一些事情
6.v-on的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on的使用</title>
</head>
<script type="text/javascript" src="/js/vue.global.prod.js"></script>
<body>
<div id="app">
<button v-on:click="sub">-</button>
{
{i}}
<button v-on:click="add">+</button>
</div>
</body>
</html>
<script type="text/javascript">
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs, computed} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup() {
//定义的数据
const data = reactive({
i:0
})
const add = () => {
data.i++
}
const sub = () => {
data.i--
}
//定义的数据和方法都需要return返回
return {
...toRefs(data),add,sub}
}
}).mount('#app')
</script>
示例：
7.参数传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>参数传递</title>
</head>
<script type="text/javascript" src="/js/vue.global.prod.js"></script>
<body>
<div id="app">
<button v-on:click="sub(10)">-</button>
{
{i}}
<button v-on:click="add(10,$event)">+</button>
</div>
</body>
</html>
<script type="text/javascript">
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs, computed} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup() {
//定义的数据
const data = reactive({
i:0
})
const add = (num,e) => {
console.log(e)
data.i += num
}
const sub = (num) => {
data.i -= num
}
//定义的数据和方法都需要return返回
return {
...toRefs(data),add,sub}
}
}).mount('#app')
</script>
示例：
8.v-if的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if的使用</title>
</head>
<script type="text/javascript" src="/js/vue.global.prod.js"></script>
<body>
<div id="app">
<div>
<h2 v-if="score>90">优秀</h2>
<h2 v-else-if="score>70">及格</h2>
<h2 v-else>不及格</h2>
</div>
</div>
</body>
</html>
<script type="text/javascript">
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs, computed} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup() {
//定义的数据
const data = reactive({
score: 91
})
//定义的数据和方法都需要return返回
return {
...toRefs(data)}
}
}).mount('#app')
</script>
示例：
10.v-show
v-show也同样具有判断的功能，只不过v-if属于真正意义的判断，如果条件失败，在渲染的时候不显示标签，v-show判断的是通过样式来决定是否显示，如果判断失败，会在标签上添加css display：none
<h2 v-show="score>80">{
{message}}</h2>
11.v-for的使用
遍历对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if的使用</title>
</head>
<script type="text/javascript" src="/js/vue.global.prod.js"></script>
<body>
<div id="app">
<!-- 普通获取-->
<span>{
{student.name}}</span>
<!-- 循环-->
<span v-for="(item,key) in student">{
{key}}-{
{item}}</span><br>
</div>
</body>
</html>
<script type="text/javascript">
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs, computed} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup() {
//定义的数据
const data = reactive({
student:{
name:'张三',
age: 23,
hobbies:'抽烟喝酒烫头'
}
})
//定义的数据和方法都需要return返回
return {
...toRefs(data)}
}
}).mount('#app')
</script>
示例：
遍历对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for遍历数组</title>
</head>
<script type="text/javascript" src="/js/vue.global.prod.js"></script>
<body>
<div id="app">
<!-- 循环-->
<span v-for="(item,key) in student">{
{key}}-{
{item}}</span><br>
</div>
</body>
</html>
<script type="text/javascript">
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs, computed} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup() {
//定义的数据
const data = reactive({
student:['jack','tom','李小屁']
})
//定义的数据和方法都需要return返回
return {
...toRefs(data)}
}
}).mount('#app')
</script>
示例：
12 v-bind示例
v-bind的作用就是用于绑定数据和元素属性的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind示例</title>
<style>
.checkDiv {
width: 50px;
height: 50px;
border-radius: 50px;
background-color: aqua;
}
</style>
</head>
<script type="text/javascript" src="/js/vue.global.js"></script>
<body>
<div id="app">
<div class="checkDiv" v-bind:style="{width:w+'px',height:h+'px'}" v-on:click="checkDiv()"></div>
</div>
</body>
</html>
<script>
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup() {
//定义的数据
const data = reactive({
w: 50,
h: 50
})
//方法
const checkDiv = () => {
data.w += 10,
data.h += 10
}
const getStyle = () => {
return{
width:data.w+'px',height:data.h+'px'}
}
//定义的数据和方法都需要return返回
return {
...toRefs(data),checkDiv,getStyle}
}
}).mount('#app')
</script>
注意：
v-bind后面是：属性名=，我的理解是表示绑定这个属性，绑定之后，对应的值要去vue的数据里面找,当然也可以等于一个常数，这样就不用去data里找了。
当我们在控制台改变url时，对应也会变化。
相同的，我们还可以绑定图片src属性、超链接的class
var app = new Vue({
el:'.app',
data:{
url:"https://www.baidu.com",
imgsrc:"https://cn.vuejs.org/images/logo.png",
class:"btn btn-default"
}
});
<div class="app">
<a v-bind:href="url" v-bind:class="klass">click me</a>
<img v-bind:src="imgsrc">
</div>
13 单选框 radio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>radio</title>
</head>
<script type="text/javascript" src="/js/vue.global.js"></script>
<body>
<div id="app">
<!-- 男<input name="sex" type="radio" value="男" checked="sex=='男">-->
<!-- 女<input name="sex" type="radio" value="女" checked="sex=='女">-->
<!-- 男<input name="sex" type="radio" value="男" v-model="sex">-->
<!-- 女<input name="sex" type="radio" value="女" v-model="sex">-->
男<input name="sex" type="radio" value="0" v-model="sex">
女<input name="sex" type="radio" value="1" v-model="sex">
</div>
</body>
</html>
<script>
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup(){
//定义的数据
const data = reactive({
sex:1
})
//定义的数据和方法都需要return返回
return {
...toRefs(data)}
}
}).mount('#app')
</script>
14 复选框样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript" src="/js/vue.global.js"></script>
<body>
<div id="app">
<!-- 单选框-->
<lable for="argee">
<input type="checkbox" id="agree" v-model="isAgree">同意协议
</lable>
<button :disabled="!isAgree">下一步</button>
<br>
<!-- 复选框-->
<input name="hobbies" type="checkbox" value="抽烟" v-model="hobbies">抽烟
<input name="hobbies" type="checkbox" value="喝酒" v-model="hobbies">喝酒
<input name="hobbies" type="checkbox" value="烫头" v-model="hobbies">烫头
</div>
</body>
</html>
<script>
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup(){
//定义的数据
const data = reactive({
isAgree : false,
hobbies: ['抽烟','烫头']
})
//定义的数据和方法都需要return返回
return {
...toRefs(data)}
}
}).mount('#app')
</script>
15 下拉列表
下拉列表：select标签
使用场景：在页面中，如果有多个选项让用户选择，使用select标签定义的下拉列表可以很有效的节约空间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript" src="/js/vue.global.js"></script>
<body>
<div id="app">
<select name="f" v-model="fruit" multiple="multiple">
<option value="苹果">苹果</option>
<option value="哈密瓜">哈密瓜</option>
<option value="草莓">草莓</option>
<option value="车厘子">车厘子</option>
<option value="榴莲">榴莲</option>
</select>
</div>
</body>
</html>
<script>
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup(){
//定义的数据
const data = reactive({
fruit:['车厘子']
})
//定义的数据和方法都需要return返回
return {
...toRefs(data)}
}
}).mount('#app')
</script>
示例：
16 多选下拉列表
一、多选下拉列表
1、框架： ?
2、multiple="multiple"是用来：支持多选
size是用来：设置条目数量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript" src="/js/vue.global.js"></script>
<body>
<div id="app">
<span v-for="(item,index) in allFruits">
{
{item}}<input type="checkbox" :value="item" v-model="selectFruit">
</span>
</div>
</body>
</html>
<script>
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup(){
//定义的数据
const data = reactive({
allFruits:['香蕉','车厘子','榴莲','芒果','黄桃','荔枝'],
selectFruit:['榴莲','车厘子']
})
//定义的数据和方法都需要return返回
return {
...toRefs(data)}
}
}).mount('#app')
</script>
示例：
控件
1、file控件：文件上传专用
2、hidden控件：隐藏域，网页上看不到，但是表单提交的时候数据会自动提交给服务器
3、readonly与disabled：
（1）相同点：两者都是只读不能修改
（2）不同点：readonly数据可以提交给服务器，disabled数据不会提交，即使有name属性也不会提交
4、input控件的maxlength：设置文本框中可输入的字符数量