Vue
Vuej简介
- JavaScript框架
- 简化Dom操作
- 响应式数据驱动
Vue基础
el：挂载点
el是用来设置Vue实例挂载的元素
Vue会管理el选择命中的元素及其内部的后代元素
可以使用其他选择器，但建议使用ID选择器
可以使用其他双标签，但不能使用HTML和BODY
<body>
<div id="app">
<h1>{{name}}</h1>
</div>
<script>
const v = new Vue({
// 第一种挂载方式
// el:"#app",
data: {
name: "hqyj"
}
})
// 第二种挂载方式
v.$mount("#app");
</script>
</body>
应用根组件的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分.
.$mount("选择器类型") 方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意，不同于其他资源注册方法，它的返回值是根组件实例而非应用实例
data：数据对象
- Vue中用到的数据定义在data中
- data中可以写复杂类型的数据
- 渲染复杂类型数据，遵守js的语法
<body>
<div id="app">
{{message}}
<h2>{{school.name}} {{school.mobile}}</h2>
<ul>
<li>{{campus[0]}}</li><br>
<li>{{campus[1]}}</li><br>
<li>{{campus[2]}}</li>
</ul>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
message: "你好，小黑子",
school: {
name: "黑马",
mobile: "100"
},
campus: ["北京校区", "上海校区", "成都校区"]
}
})
</script>
Vue指令
v-text
插值语法：设置标签的文本值
//HTML
<div id="app">
<h2 v-text="message">你好</h2>
</div>
//js
var app = new Vue({
el: "#app",
data: {
message: "黑马程序员!!!!",
}
})
- v-text 指令的作用是：设置标签的内容（textContent）
- 默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容 建议使用{{}}
v-html
<body>
<div id="app">
<h2 v-html="content"></h2>
<h2 v-text="content"></h2>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
// content: "黑马程序员"
content: "<a href='http://www.baidu.com'>百度</a>"
}
})
</script>
- v-html指令的作用是：设置元素的innerHTML
- 内容有html结构会被解析为标签
- v-text指令无论内容是什么，都只会解析为文本
- 解析文本使用v-text，需要解析html结构使用v-html
v-on
为元素绑定事件
<body>
<div id="app">
<input type="button" value="v-on指令" v-on:click="doit">
<input type="button" value="v-on指令" @click="doit">
<input type="button" value="双击事件" @dblclick="doit">
<h2 @click="changeFood">{{food}}</h2>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
food: "西蓝花炒蛋"
},
methods: {
doit: function () {
alert("做It");
},
changeFood: function () {
// console.log(this.food)
this.food += "好好吃!!"
}
},
})
</script>
- v-on指令作用是：为元素绑定事件
- 事件不需要写on
- 指令可以简写为@
- 绑定的方法定义在methods属性中
- 方法内部通过this关键字可以访问定义在data中数据
v-on（补充）
- 事件绑定的方法写成函数调用的形式，可以传入自定义参数
- 定义方法时需要定义形参来接受传入的实参
- 事件的后面跟上 .修饰符可以对事件进行限制
- .enter 可以限制处罚的按键为回车
- 事件修饰符有很多种
练习：计数器
<body>
<div id="app">
<input type="button" @click="sub" value="-">
<span>{{num}}</span>
<input type="button" @click="add" value="+">
</div>
</body>
</html>
<script>
var app = new Vue({
el: "#app",
data: {
num: 1
},
methods: {
add: function () {
if (this.num == 10) {
alert("不能再加了哦！")
} else {
this.num++;
}
},
sub: function () {
if (this.num == 0) {
alert("不能再减了哦！")
} else {
this.num--;
}
}
}
})
</script>
- 创建Vue示例时：el(挂载点)，data(数据)，methods(方法)
- v-on 指令中的作用是绑定事件,简写为@
- 方法中通过this,关键字获取data中的数据
- v-text指令的作用是：设置元素的文本值，简写为{{}}
- v-html指令的作用是：设置元素的innerHTML
v-show
根据表达值的真假，切换元素的显示和隐藏
<body>
<div id="app">
<input type="button" @click="changeShow" value="点击变身">
<img v-show="isshow" src="../../img/钢铁侠.png">
<img v-show="age>18" src="../../img/钢铁侠.png">
<input type="button" @click="addAge" value="变大">
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
isshow: false,
age: 16
},
methods: {
changeShow() {
this.isshow = !this.isshow;
},
addAge() {
this.age++;
}
},
})
</script>
- v-show指令的作用是：根据表达式的真假，切换元素的显示状态
- 原理是修改元素的display属性，实现显示、隐藏
- 指令后面的内容，最终都会解析为布尔值
- 值为true元素显示，值为false元素隐藏
v-if
根据表达式的真假，切换元素的显示和隐藏(操纵dom元素)
<body>
<div id="app">
<P v-if="isShow">黑马程序员</P>
<input type="button" value="转换" @click="changeIsShow">
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
isShow: false
},
methods: {
changeIsShow() {
this.isShow = !this.isShow
}
}
})
</script>
- v-if 指令的作用是：根据表达式的真假，切换元素的显示状态
- 本质是通过dom元素来切换显示状态
- 表达式的值为true，元素存在于dom树中，为false，直接从dom树中移除 而v-show是通过改变display属性 元素仍在dom树中
- 频繁的切换 使用v-show，反之使用v-if，前者的切换消耗小
v-bind
设置元素的属性(比如：src，title，class)
<body>
<div id="app">
<img v-bind:src="imgSrc" alt="">
<br>
<img :src="imgSrc" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive"> //三目运算符修改class
<br><br><br><br><br>
<img :src="imgSrc" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">//对象的方式修改class(建议)
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
imgSrc: "https://i0.hdslb.com/bfs/archive/041efa5e7e809fad89acc1c74ef0b3d0c3317d6d.jpg@672w_378h_1c_!web-home-common-cover.avif",
imgTitle: "黑马程序员",
isActive: false
},
methods: {
toggleActive: function () {
this.isActive = !this.isActive;
}
}
})
</script>
- v-bind指令的作用是：为元素绑定属性
- 完整写法是：v-bind：属性名
- 简写的话可以直接省略v-bind，只保留：属性名
- 需要动态的增删class，建议使用对象的方式
v-for
<body>
<div id="app">
<input type="button" value="添加数据" @click="add">
<input type="button" value="移除数据" @click="remove">
<ul>
<li v-for="(item,index) in arr"> //添加索引 item，index相当于for里的i 就是定义了一个变量
{{index+1}}黑马程序员校区:{{item}}
</li>
</ul>
<h2 v-for="item in vegetables" :title="item.name"> //可以同时用
{{item.name}}
</h2>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
arr: ["北京", "东北", "长沙", "成都"],
vegetables: [
{ name: "西蓝花炒蛋" },
{ name: "韭菜炒鸡蛋" }
]
},
methods: {
add: function () {
this.vegetables.push({ name: "花菜炒蛋" })
},
remove: function () {
this.vegetables.shift();
}
}
})
</script>
- v-for指令的作用是：根据数据生成列表结构
- 数组经常和v-for结合使用
- 语法(item，index) in 数据
- item 和 index 可以结合其他指令一起使用
- 数组长度的更新会同步到页面上，是响应式的
v-model
获取和设置表单元素的值 (双向数据绑定)
<body>
<div id="app">
<input type="text" value="修改message" @click="setM">//通过事件绑定调用方法修改message 验证双向绑定
<input type="text" v-model="message" @keyup.enter="getM">
<h2>{{message}}</h2>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
message: "黑马程序员"
},
methods: {
//通过绑定键盘松开事件 获取message值 并alert
getM: function () {
alert(this.message)
},
setM: function () {
this.message = "钢铁侠";
}
}
})
</script>
- v-model指令的作用是便捷的设置和获取表单元素的值
- 绑定的数据会和表单元素值相关联
- 绑定的数据←→表单元素的值（双向绑定）
180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
