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的区别
- v-show底层是在切换display属性(display: none;display: block;);v-if本质上是在创建或移除节点
- 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:属性名=“表达式”
简写 :属性名=“表达式”