</span>
</span>
<h3>用户名：{{username}}</h3>
</div>
**2、vue实例中定义对象，数组等相关数据**
{{msg}}
{{age}}
姓名：{{user.name}} 描述：{{user.des}}
{{schools[0]}}-{{schools[1]}}-{{schools[2]}}-{{schools[3]}}
姓名：{{users[0].name}} 年龄：{{users[0].age}} 生日：{{users[0].bir}}
姓名：{{users[1].name}} 年龄：{{users[1].age}} 生日：{{users[1].bir}}
姓名：{{users[2].name}} 年龄：{{users[2].age}} 生日：{{users[2].bir}}
**3、使用{{属性名}}获取data数据时,使用表达式 运算符等相关操作**
{{msg}}
{{msg + '您好'}}
{{msg == 'hello vue'}}
{{msg.toUpperCase()}}
{{age + 1}}
{{age == 23}}
**4、使用vue时el属性指定**
{{msg}}
</div>
**5、总结**
总结:
1.vue实例(对象)中el属性: 代表Vue的作用范围 日后在Vue的作用范围内都可以使用Vue的语法
2.vue实例(对象)中data属性: 用来给Vue实例绑定一些相关数据, 绑定的数据可以通过{{变量名}}在Vue作用范围内取出
3.在使用{{}}进行获取data中数据时,可以在{{}}中书写表达式,运算符,调用相关方法,以及逻辑运算等
4.el属性中可以书写任意的CSS选择器[jquery选择器],但是在使用Vue开发是推荐使用 id选择器 注意: el属性值不能指定body或html标签
---
### 3、v-text和v-html
#### 3.1、v-text
>
> `v-text`:用来获取data中数据将数据以文本的形式渲染到指定标签内部 类似于javascript 中 innerText
>
>
>
<div id="app" class="aa">
<span >{{ message }}</span>
<span v-text="message"></span>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:“#app”,
data:{
message:“百知欢迎您”
}
})
总结
1.{{}}(插值表达式)和v-text获取数据的区别在于
a.使用v-text取值会将标签中原有的数据覆盖 使用插值表达式的形式不会覆盖标签原有的数据
b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁
#### 3.2、v-html
>
> `v-html`:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部 类似于javascript中 innerHTML
>
>
>
<div id="app" class="aa">
<span>{{message}}</span>
<br>
<span v-text="message"></span>
<br>
<span v-html="message">xxxxxx</span>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:“#app”,
data:{
message:“百知欢迎您”
}
})
} })
#### 3.3、v-text和v-html对比
**代码：**
{{msg}} 您好
<!--v-text-->
<h2><span v-text="msg"></span> 您好</h2>
<!--
v-text: {{}} 取值区别：
1.使用{{}}取值不会将标签原始数据覆盖 使用v-text获取数据会将标签中原始内容覆盖
2.v-text获取数据时不会出现插值闪烁 {{属性名}} ===> 插值表达式：容易出现插值闪烁 插值闪烁：当网络不好条件情况下使用{{}}方式获取数据
–>
{{content}}
**运行结果：**
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LdfpoTfT-1627348740558)(Vue实战笔记（一）.assets/image-20210709215316787.png)]](https://img-blog.csdnimg.cn/cee0274b0358430cae1c1047545c095d.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTI4NQ==,size_16,color_FFFFFF,t_70)
### 4、vue中事件绑定(v-on)
#### 4.1、绑定事件基本语法
**1、vue事件绑定（一）**
{{msg}}
<!--
js 事件三要素
1.事件源：发生事件源头称之为事件源，一般指的是html标签
2.事件：发生特定动作 onclick单击 dbclick 双击 onkeyup …
3.监听器：事件处理器程序 事件处理函数 function(){}
vue 事件：v-on
1.在vue中给对应标签绑定事件可以通过vue提供v-on指令进行事件绑定 ==> v-on:事件名
2.在vue中事件处理函数统一声明在vue实例中methods属性
–>
**2、vue事件绑定（二）**
给一个按钮绑定点击+1事件。
{{msg}}
{{age}}
**3、总结**
事件源: 发生事件`dom`元素 事件: 发生特定的动作 `click....` 监听器 发生特定动作之后的事件处理程序 通常是`js`中函数
1. 在`vue`中绑定事件是通过`v-on`指令来完成的 `v-on:`事件名 如 `v-on:click`
2. 在`v-on:`事件名的赋值语句中是当前事件触发调用的函数名
3. 在`vue`中事件的函数统一定义在`Vue`实例的`methods`属性中
4. 在`vue`定义的事件中`this`指的就是当前的`Vue`实例,日后可以在事件中通过使用`this`获取`Vue`实例中相关数据 调用`methods`中相关方法
#### 4.2、Vue中事件的简化语法
{{msg}}
{{age}}
<!--
vue事件绑定 v-on：事件名 简化写法===> @事件名
–>
<input type=“button” value=“点我改变年龄” @click=“changeAge”>
总结:
1.日后在vue中绑定事件时可以通过@符号形式 简化 v-on 的事件绑定
#### 4.3、Vue事件函数两种写法
总结:
1.在Vue中事件定义存在两种写法
一种是 函数名:function(){}
一种是 函数名(){} 推荐
#### 4.4、Vue事件参数传递
我们还可以给vue事件中传递参数。
{{msg}}
{{age}}
<!--
vue事件绑定 v-on：事件名 简化 @事件名=“事件函数名(参数…)”
–>
<!--多个参数使用','隔开-->
<input type="button" value="点我改变年龄的值" @click="changeAge(10,'xiaohei')">
</div>
总结:
1.在使用事件时,可以直接在事件调用处给事件进行参数传递,在事件定义处通过定义对应变量接收传递的参数
---
### 5、v-show v-if v-bind
#### 5.1、v-show、v-if使用
>
> `v-show`: 用来控制页面中某个标签元素是否展示
>
>
> `v-if`: 用来控制页面元素是否展示
>
>
>
{{msg}}
{{content}}
{{content}}
}
});
**总结：**
1. 在使用v-show时可以直接书写boolean值控制元素展示,也可以通过变量控制标签展示和隐藏。
2. 在v-show中可以通过boolean表达式控制标签的展示和隐藏。
3. v-if、v-show ： 作用：都是用来控制页面中标签是否展示和隐藏 使用：标签：`v-if="true|false"` ,`v-show="true|false"`
4. 区别：
* v-show: 底层在控制页面标签是否展示时底层使用的是css 中 display 属性来标签展示和隐藏 。推荐使用：v-show 在数据量比较大和控制显示状态切换频繁时。
* v-if : 底层在控制页面标签是否展示时底层是直接操作dom元素，通过对dom元素删除和添加来控制标签的展示和隐藏。
#### 5.2、v-show、v-if小案例
**1、v-show、v-if显示隐藏案例(一)**
{{msg}}
<!--绑定事件 单击事件 @click-->
<input type="button" value="显示" @click="show">
<input type="button" value="隐藏" @click="hidden">
<input type="button" value="切换显示状态" @click="changeState">
<input type="button" value="切换显示状态,另一种写法" @click="isShow=!isShow">
</div>
**2、v-show、v-if显示隐藏案例(二)**
{{msg}}
<!--图片添加鼠标移入事件-->
<img width="200" v-show="isShow" @mouseover="hide" style="border: 5px red solid" src="https://img0.baidu.com/it/u=384452397,1089369801&fm=26&fmt=auto&gp=0.jpg" alt="这是图片">
</div>
#### 5.3、v-bind
>
> `v-bind`: 用来绑定标签的属性从而通过vue动态修改标签的属性
>
>
>
<h2>{{msg}}</h2>
<!--
v-bind: 绑定 作用：用来将html标签中相关属性绑定到vue实例中，日后通过对vue实例中数据修改，影响到对应标签中属性变化
语法：v-bind:属性名
–>
}
});
#### 5.4、v-bind 简化写法
>
> vue为了方便我们日后绑定标签的属性提供了对属性绑定的简化写法如 `v-bind:属性名` 简化之后 `:属性名`
>
>
>
>
> 扩展v-bind使用
>
>
>
<h2>{{msg}}</h2>
<!--
v-bind: 绑定 作用：用来将html标签中相关属性绑定到vue实例中，日后通过对vue实例中数据修改，影响到对应标签中属性变化
语法：v-bind:属性名 =====> 简化写法：属性名
–>
}
});
#### 5.5、v-bind案例
实现鼠标移入和移出对图片和边框的切换。
<h2>{{msg}}</h2>
<!--属性绑定-->
<img width="200" @mou="change" :src="src" :class="cls" @mouseover="change" @mouseout="recover">
</div>
### 6、v-for的使用
>
> `v-for`: 作用就是用来对对象进行遍历的(数组也是对象的一种)
>
>
>
<h2>{{msg}}</h2>
<!--
v-for : 作用：用来给vue实例中数据进行遍历
–>
遍历对象
index: {{index}} key:{{key}} value:{{value}}
<h1>遍历数组</h1>
<h2 v-for="(school,index) in schools">
index:{{index}} schools:{{school}}
</h2>
<h1>遍历数组中含有对象</h1>
<h2 v-for="(user,index) in users" :key = "user.id">
index: {{index}} name:{{user.name}} age:{{user.age}} bir:{{user.bir}}
</h2>
</div>
}
});
总结
1.在使用v-for的时候一定要注意加入:key 用来给vue内部提供重用和排序的唯一key
---
### 7、v-model 双向绑定
#### 7.1、v-model
>
> `v-model`: 作用用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向的数据绑定机制
>
>
>
**代码：**
<h2>{{msg}}</h2>
<!--
v-model : 作用：用来绑定from表单标签中的value属性交给vue实例进行管理 input select checxbox button …
–>
<input type="button" value="改变data数据" @click="change">
</div>
},
methods:{ //用来给vue实例定义事件处理函数
change(){
this.msg = “vue学习”
}
}
});
**总结：**
总结
1.使用v-model指令可以实现数据的双向绑定
2.所谓双向绑定 表单中数据变化导致vue实例data数据变化 vue实例中data数据的变化导致表单中数据变化 称之为双向绑定
MVVM架构 双向绑定机制
Model: 数据 Vue实例中绑定数据
VM: ViewModel 监听器
View: 页面 页面展示的数据
学完v-model以后，我们一起来做两个小案例。
#### 7.2、两个案例
>
> **备忘录案例实现**
>
>
>
**需求：**
**代码：**
{{msg}}
输入备忘录内容：
**效果：**
>
> **购物车案例实现**
>
>
>
**需求：**
**代码：**
{{msg}}
<table border="1">
<tr>
<th>id</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>小计</th>
</tr>
<!--v-for-->
<tr v-for="(item,index) in items" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td><input type="button" value="-" @click="decrCount(index)">{{item.count}}<input type="button" value="+" @click="incrCount(index)"></td>
<td>{{(item.price * item.count).toFixed(2)}}</td>
</tr>
</table>
<h3>总价格：{{getTotalPrice()}}</h3>
</div>
**效果：**
### 8、计算属性
>
> 计算属性：computed: vue官方提供一个计算属性
>
>
>
**代码：**
{{msg}}
<!--
computed: vue官方提供一个计算属性
作用：在完成某种业务时，往往页面结果需要经过多次计算才能获取，computed属性就是用来完成页面结果多次计算
好处：在完成计算同时也会将本次计算结果进行缓存，如果数据没有发生变化，在页面中多次使用，计算方法仅执行一次
使用：{{ 属性名}} 属性名即方法名称
–>
| id | 名称 | 价格 | 数量 | 小计 |
|---|---|---|---|---|
| {{item.id}} | {{item.name}} | {{item.price}} | <input type=“button” value=“-” @click=“decrCount(index)”>{{item.count}}<input type=“button” value=“+” @click=“incrCount(index)”> | {{(item.price * item.count).toFixed(2)}} |
<!--使用methods方法完成计算业务：
缺点：
1.只要调用了一次计算方法，整个计算方法就会执行一次，如果在一个页面中多次使用到计算结果，可能会导致造成重复计算，导致页面加载性能变低
–>
总价格：{{totalPrice}}
</div>
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
8295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
