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

注意：日后在使用 Vue 过程中页面中不需要再引入 Jquery 框架。

下载 Vue

---

开发版本：

生产版本：

{{}}：插值表达式

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

I am {{name}} !

{{ msg }}

总结：

• Vue 实例对象中 el 属性：代表 Vue 的作用范围，在 Vue 的作用范围内都可以使用 Vue 的语法。

• Vue 实例对象中 data 属性：用来给 Vue 实例绑定一些相关数据，绑定的数据可以通过 {{ xx }} 在 Vue 作用范围内取出。

• 在使用 {{ xx }} 进行获取 data 中数据时,可以在 {{ }}中书写表达式、运算符、调用相关方法以及逻辑运算等。

• el 属性中可以书写任意的 CSS选择器[jquery选择器]，但是在使用 Vue 开发推荐使用 id选择器。

v-text：显示文本

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

v-text：用来获取 data 中数据将数据以文本的形式渲染到指定标签内部，类似于 javascript 中 innerText。

使用 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”>

  

  

  【项目】记事本案例

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

  最后

  本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

  

  前端视频资料：
  e">

  

  

  【项目】记事本案例

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

  最后

  本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

  [外链图片转存中…(img-4mST2kJb-1720103668253)]

  前端视频资料：