vue基础

vue概念

1. vue是什么?

vue是一个用于构建用户界面的渐进式框架
构建用户界面基于数据构建用户界面
渐进式逐步学习工具(vue-router,vuex,webpack/vite)

2. 创建vue实例

  // 1. 准备容器
  <div id="box">{{ msg }}</div>
  // 2. 引包(从官网下载vue包)
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  // 3. 创建实例对象, 添加配置项
  <script>
    new Vue({
      el: '#box',
      data: {
        msg: 'vue实例'
      }
    })
  </script>

3. 插值表达式

{{ 表达式 }} 将数据渲染到页面

使用的数据必须存在（在data提供）
支持的是表达式(有值的表达式)
不可以在标签属性中使用{{ }}

<!-- 这种写法是不被允许的 -->
<p title="{{ username }}">p</p>

4. vue的响应式特性

数据变化，视图自动更新

5. vue开发者工具

极简插件->Vue Devtools

vue指令

• v-html

v-html=“表达式”
设置元素的innerHTML(标签内容)

<div id="box">
  <p v-html="a"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
  el: '#box',
  data: {
    a: 20
  }
})
</script>

• v-show,v-if

控制元素的显示隐藏
v-show=“表达式” v-if=“表达式” 表达式为true，显示；表达式为false，隐藏

v-show和v-if的区别

1. v-show底层是在切换display属性(display: none;display: block;)；v-if本质上是在创建或移除节点
2. v-show更利于使用在需要频繁切换显示与隐藏的场景；v-if使用在不频繁切换的场景

• v-else,v-else-if

辅助v-if进行判断渲染

• v-on

注册事件 = 添加监听 + 提供处理逻辑
v-on:事件名=“内联语句”
v-on:事件名=“methods中的函数名”
简写 @事件名=“methods中的函数名”
@事件名=“fn(参数)” 传递参数

• v-bind

动态设置html的标签属性
v-bind:属性名=“表达式”
简写 :属性名=“表达式”