Vue 学习笔记（1） Vue 基础语法 + Axios 基本使用

使用 v-text：

姓名：

年龄:

{{lists[0]}}---{{lists[1]}}---{{lists[2]}}

使用 {{}}：

{{ msg }}

名称: {{ user.name }}

年龄: {{ user.age }}

{{ lists[0] }} --- {{ lists[1] }} --- {{ lists[2] }}

{{ users[0].name }}

{{ xx }}（插值表达式）和 v-text 获取数据的区别在于：

• 使用 v-text 取值会将标签中原有的数据覆盖，

插值表达式的形式不会覆盖标签原有的数据。

• 使用 v-text 可以避免在网络环境较差的情况下出现插值闪烁。（已修复）

v-html：显示解析html标签的文本

=======================================================================================

v-html：用来获取 data 中数据将数据中含有的 html 标签先解析在渲染到指定标签的内部，类似于 javascript 中 innerHTML。

{{ message }} xxxxxxxxxx

xxxxxxxxxx

xxxxxxxxxx

v-on：事件绑定

============================================================================

v-on：事件绑定

• v-on:click 可以简化成 @click

• 事件函数可以简写，dowork: function() {} 可以简写成 dowork() {}

鼠标点击次数: {{count}}

年龄: {{age}}

<input type=“button” value=“通过@绑定事件修改年龄每次-1” @click=“editage”>

<input type=“button” value=“统计点击次数” @click=“clickcount”>

v-show：控制页面元素隐藏与显示(display控制)

================================================================================================

v-show：用来控制页面中某个标签元素是否展示，底层通过控制元素的 display 属性来进行标签的显示和不显示控制。

• 在 v-show 中可以直接书写 boolean 值控制元素展示

• 在 v-show 中可以通过 变量 控制标签展示和隐藏。

• 在 v-show 中可以通过 boolean表达式 控制标签的展示和隐藏。

hello Vue.j

年龄: {{ age }}

恭喜你发现了隐藏内容！

<input type=“button” value=“展示隐藏标签” @click=“showmsg”>

年龄达到了30，显示该内容！

<input type=“button” @click=“changeAge” value=“age>=30显示标签”>

点击 展示隐藏标签 后会显示内容。

点击 增加年龄 将年龄增大到 30 后会显示内容。

v-if：控制页面元素隐藏与显示(dom操作)

==========================================================================================

v-if：用来控制页面中的标签元素是否展示，底层通过对 dom 树节点进行添加和删除来控制展示和隐藏。

与 v-show 的用法一模一样，参考 v-show 即可。

hello Vue.js!

hello Vue.js!

v-bind：绑定标签的属性

=================================================================================

v-bind：用来绑定 标签的属性 从而通过 vue 动态修改标签的属性。

• v-bind : 属性 可以简写成 : 属性

<input type=“button” value=“动态控制加入样式” @click=“addCss”>

<input type=“button” value=“改变图片” @click=“changeSrc”>

点击 动态控制加入样式 和 改变图片：

v-show、v-if、v-bind 综合

========================================================================================

hello Vue.js!

hello Vue.js!

<input type=“button” value=“点我显示隐藏” @click=“showHide”>

---

这个是不会显示的, 除非前面是true

---

<input type=“button” value=“点我改变title属性” @click=“changeTitle(‘这是改变之后的title’)”>

<input type=“button” value=“点我改变src属性” @click=“changeSrc(‘https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1664551187,1969969469&fm=26&gp=0.jpg’)”>

v-for：遍历对象

=============================================================================

v-for：用来对 对象 进行遍历的（JavaScript 中数组也是对象的一种）

• 在使用 v-for 的时候一定要注意加入:key 用来给 Vue 内部提供重用和排序的唯一 key

• 遍历时可以获取 索引 index、…

{{ user.name }} {{ user.age }}

{{index}} : {{key}} : {{value}}

• {{index + 1}} : {{a}}

• {{index + 1}}
  

  name: {{user.name}}
  

  age: {{user.age}}
  

  hobby: {{user.hobby}}

  

  v-model：实现双向绑定

  =================================================================================

  v-model：用来绑定 标签元素的值 与 vue实例对象中data数据 保持一致，从而实现 双向的数据绑定机制。

  • 所谓双向绑定，就是表单中数据变化导致 vue 实例 data 数据变化，vue 实例中 data 数据的变化导致表单中数据变化。

  MVVM 架构 双向绑定机制

  Model：数据 Vue实例中绑定数据

  View：页面 页面展示的数据

  VM：ViewModel 监听器

  {{ message }}

  ---

  <input type=“button” value=“改变data中的值” @click=“changeValue”>

  

  

  【项目】记事本案例

  ============================================================================

  <input type=“button” value=“添加到记事本” @click=“save”>
  
  

  【记事本内容】:

• {{ index + 1}} : {{ item }} <a href=“javascript:;” @click=“delRow(index)”>删除

  
  

  总数量: {{ lists.length }} 条

  <input type=“button” v-show=“lists.length != 0” value=“删除所有” @click=“deleteAll”>

  最后

  如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】