](Vue基础使用)# 学习目标：
- 1、掌握vue的基本语法
- 2、掌握vue在项目中的应用
学习内容：
1、什么是vue.js
- vue.js 是一套构建用户界面的渐进式框架，特点是数据驱动视图
- Vue.js是前端的主流框架，和Angular.js、React.js一起为三大主流框架
2、为什么学习框架
- 提高开发效率
- 减少不必要的DOM操作，提高渲染效率，让程序员有更多的事件关注业务逻辑
3、框架和库的区别
1.框架是一套完整的解决方案，对项目的入侵性较大，如果需要更换框架，则需要重新架构整个项目
2.库：提供一个小功能，对项目的入侵性较小，如果库无法完成某些需求，可以很容易的切换到其他库实现需求。
MVC与MVVM的区别
- MVC是后端的分层开发概念
- MVVM是前端视图层的概念
Vue.js的代码结构
- 引入Vue.js
- 写视图层，即展示的内容
- 实例化Vue()
el：控制哪块视图
data：存放数据
methods：存放方法
插值表达式 v-cloak、v-text、v-html
- 插值表达式{{}}，可以在前后插入一些内容
- v-clock防止界面闪烁
- v-text：会替换掉元素里的内容
- v-html：可以渲染html界面
v-bind 界面元素属性的绑定 简写：
- 括号里不加引号的都是我们data里的数据读取
- 如果想使用字符串需要加上引号
- 里面可以写表达式
- 里面也可以调用定义好的方法，拿到的是方法的返回值
<body>
<div id='app'>
<!-- 1、.stop 阻止冒泡 -->
<header @click="log3">
<aside @click.stop="log2">
<button @click="log1">按钮</button>
</aside>
</header>
<!-- 2、.capture 添加事件侦听器时使用事件捕获模式 -->
<header @click="log3">
<aside @click.capture="log2">
<button @click="log1">按钮</button>
</aside>
</header>
<!-- 3、.self 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
<header @click="log3">
<aside @click.self.stop="log2">
<button @click="log1">按钮</button>
</aside>
</header>
<!-- 4、.once 事件只触发一次 -->
1111111111111
<header @click="log3">
<aside @click.once="log2">
<button @click="log1">按钮</button>
</aside>
</header>
<!-- 5、.prevent 阻止默认事件 -->
<a @click.prevent.once="target" href="http://www.baidu.com">百度一下</a>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
},
methods: {
log1() {
console.log(1111111111);
},
log2() {
console.log(222222222222);
},
log3() {
console.log(333333333333);
},
target() {
console.log('点击我了');
}
}
})
</script>
</body>
v-on 进行事件的绑定 简写@
v-model 数据双向绑定
<body>
<div id="app">
<input type="text" :value="value" />
<input type="text" v-model:value="value" />
<input type="text" v-model="value" />
<button @click="getVal">按钮</button>
<input type="text" v-model="value1" />
<select name="" id="" v-model="value1">
<option value=""></option>
</select>
<input type="text" v-model="value2" />
<button @click="add">=</button>
<input type="text" v-model="value3" />
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
value: "abc",
value1: 0,
value2: 0,
value3: 0,
},
methods: {
getVal() {
console.log(this.value);
},
add() {
this.value3 = Number(this.value1) + Number(this.value2);
},
},
});
</script>
</body>
Vue中样式的使用
使用class样式：
- 数组
- 三木表达式
- 数组内置对象（对象的键是样式的名字，值是bool类型）
- 直接通过对象
使用内联样式：
- 直接在元素上通过 :style 的形式，书写样式对象
- 将样式对象，定义到 data 中，并直接引用到 :style 中
- 在 :style 中通过数组，引用多个 data 上的样式对象
<body>
<div id="app">
<div style="color: red">阿根廷夺冠</div>
<div :style="style">阿根廷夺冠</div>
<div :style="style1">阿根廷夺冠</div>
<div :style="[style1,style2]">阿根廷夺冠</div>
<div :style="getStyle()">阿根廷夺冠</div>
<button @click="changStyle">changStyle</button>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
style: "color: red;",
style1: {
color: "red",
},
style2: {
fontSize: "40px",
},
},
methods: {
changStyle() {
this.style1.color = "green";
this.style1.fontSize = "40px";
},
getStyle() {
return {
color: "red",
};
},
},
});
</script>
</body>
v-for和key属性
- 遍历数组，参数(item,index) in list
- 遍历对象，参数(value,key,index) in list
- 遍历数字，num in 10 (1~10)
- key在使用v-for的时候都需要去设置key
i.让界面元素和数组里的每个记录进行绑定
ii.key只能是字符串或者数字
iii.key必须是唯一的
<body>
<div id="app">
<ul>
<li>{{list[0]}}</li>
<li>{{list[1]}}</li>
<li>{{list[2]}}</li>
<li>{{list[3]}}</li>
</ul>
<!-- 1、遍历数组 -->
<ul>
<li v-for="(item,index) in list">{{item}}====={{index}}</li>
<li v-for="item in list">{{item}}</li>
<li v-for="(item,index) in courseList">{{item.title}}===={{index}}</li>
</ul>
<!-- 2、遍历对象 -->
<ul>
<li v-for="(value,key,index) in obj">{{value}}=={{key}}=={{index}}</li>
</ul>
<!-- 3、遍历数字 -->
<ul>
<!-- <li v-for="(item,index) in 10"> -->
<li v-for="num in 10">
<img src="" alt="" />
<div>11111</div>
</li>
</ul>
<ul>
<li v-for="(item,index) in courseList1">
{{item.title}}
<div v-for="(item1,index1) in item.section">{{item1.page}}</div>
</li>
</ul>
<ul>
<li
@click="active(item)"
:class="activeIndex==item?'red':''"
v-for="(item,index) in 4"
>
{{item}}
</li>
<!-- <li @click="active(2)" :class="activeIndex==2?'red':''">2</li>
<li @click="active(3)" :class="activeIndex==3?'red':''">3</li>
<li @click="active(4)" :class="activeIndex==4?'red':''">4</li> -->
</ul>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
activeIndex: 1,
list: [1, 2, 3, 4],
courseList: [
{
title: "第一章",
},
{
title: "第二章",
},
{
title: "第三章",
},
],
obj: {
name: "zs",
age: 18,
},
courseList1: [
{
title: "第01天_HTML之HTML初始",
section: [
{
page: "1-1 开发工具介绍",
},
{
page: "1-2 开发工具介绍",
},
{
page: "1-3 开发工具介绍",
},
],
},
{
title: "第02天_HTML之HTML初始",
section: [
{
page: "2-1 开发工具介绍",
},
{
page: "2-2 开发工具介绍",
},
{
page: "3-3 开发工具介绍",
},
],
},
],
},
methods: {
active(index) {
console.log(index);
this.activeIndex = index;
},
},
});
</script>
</body>
v-if与v-show的区别
区别
- v-if删除dom元素
- v-show设置display：none
应用场景
- v-if：只修改一次
- v-show：需要频繁切换的时候
<body>
<div id='app'>
<!--
v-if v-show的异同：
相同点：显示隐藏元素
不同点：v-if是删除DOM元素
v-show:通过display:none隐藏元素
应用场景：v-if用于一次显示隐藏
v-show用于多次
-->
<div v-if="flag">123</div>
<div v-show="flag">456</div>
<div v-if="age<18">未成年</div>
<div v-else>成年</div>
<div v-if="age<18">未成年</div>
<div v-else-if="age<30">青年</div>
<div v-else-if="age<60">中年</div>
<div v-else>老年</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
flag: false,
age: 31
},
methods: {
}
})
</script>
</body>
学习时间：2022-12-26
学习笔记：
- 在data中定义的变量，引用的时候需要加上this.
- v-text 和v-html 相同：覆盖元素原来的节点 不同：v-html可以解析富文本
- .stop 阻止冒泡 .capture 使用事件捕获模式 .self 只在该元素本身触发时回调 .once 事件只触发一次
- key:必须是唯一值，必须是字符串或者数字。提高重排效率，就地复用。
- Vue特点：数据驱动视图
772
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
