西湖区建设局网站百度热议
概念
VUE是一个用于构建用户界面的渐进式框架
构建用户界面：基于数据渲染出用户看到的界面
渐进式：声明式渲染->组件系统->客户端路由->大规模状态管理->构建工具
框架：一套完整的项目解决方案
VUE使用方式：
1.局部模块改造，用Vue核心包开发
2.整站开发，用Vue核心包&Vue插件&工程化开发
创建实例
1.创建Vue实例，初始化渲染
准备容器
<div id="app"></div>引包
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>创建Vue实例
el：指定挂载点
data：提供数据
const app = new Vue({el: '#app',data: {msg: 'hello'}})指定配置项
<div id="app">{{msg}}</div>插值表达式
{{ }}：利用表达式进行插值，渲染到页面
注意点
1.使用数据必须存在
2.支持表达式，但不支持语句
3.不能在标签属性中使用{{}}插值
响应式特性
响应式：数据变化，视图自动更新
访问
app.msg修改数据
app.msg="bye"开发者工具
指令
带前缀的特殊标签属性
v-html
作用：设置元素的innerHTML
语法：v-html="表达式"
<body><div id="app"><div v-html="msg"></div></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {msg: '<a href="www.baidu.com">baidu</a>'}})</script>v-show
作用：控制元素显示隐藏
语法：v-show="表达式"，表达式为true显示，false隐藏，但在源码中显现
场景：频繁切换显示隐藏的场景
v-if
作用：控制元素显示隐藏（条件渲染）
语法：v-if="表达式"，表达式为true显示，false隐藏，不在源码中显现
场景：要么显示，要么隐藏
v-on
作用：注册事件=添加监听+提供处理逻辑
语法：
1.v-on:事件名="内联语句" 或者@事件名="内联语句"
2.v-on:事件名="methods中的函数名" 或者@事件名="methods中的函数名"
v-else
作用：辅助v-if进行判断渲染
语法：v-else="表达式"，要紧挨v-if使用
v-else-if
见上
v-bind
作用：动态地设置html的标签属性
语法：v-bind:属性名="表达式"
v-for
作用：基于数据循环（数组，对象，数字~），多次渲染整个元素
语法：v-for="(item,index) in 数组"，要加key属性
v-model
作用：给表单元素使用，双向数据绑定，快速获取设置表单元素内容
语法：v-model="表达式"
Vue文件（.vue）
规范：
1.属性绑定，src="{{url}}升级为"src="url"
2.事件绑定，bindtap="eventName"升级为@tap="eventName"
3.支持Vue常用指令