Vue
1.Vue入门
Vue的使用步骤：
-
准备工作
-
引入vue模块
-
创建vue的应用实例
-
定义元素（div），交给vue控制
<body><div id="app"></div><!-- 引入vue模块 --><script type="module">import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'// 创建vue的应用实例createApp({}).mount("#app")</script> </body> -
-
构建用户界面
-
准备数据
-
用插值表达式渲染
<body><div id="app"><h1>{{msg}}</h1></div><!-- 引入vue模块 --><script type="module">import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'// 创建vue的应用实例createApp({data(){return{// 定义数据msg: 'hello,vue3'}} }).mount("#app")</script> </body>
-
2.Vue指令v-for
列表渲染，遍历容器的元素或者对象的属性
语法：v-for="(item,index) in items"
-items 为遍历的数组
-item 为遍历出来的元素
-index 为索引/下标，从0开始；可以省略，省略index语法：v-for = "item in items"
哪个元素要出现多次，v-for指令就添加到哪个元素上
shift + alt + f 代码格式化
3.Vue指令v-bind
动态为HTML标签绑定属性值，如设置href，src，style样式等
语法：v-bind：属性名="属性值" 简化：属性名="属性值"
4.Vue指令v-if和v-show
这两类指令，都是用来控制元素的显示与隐藏的
v-if：v-if=“表达式”，表达式值为true则显示，false则隐藏
可以配合v-else-if / v-else进行链式调用条件判断
原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
v-show：v-show=“表达式”，表达式值为true则显示，false则隐藏
原理：基于CSS样式display来控制显示与隐藏
5.Vue指令v-on
为html标签绑定事件
v-on：事件名=“函数名” 简写为 @事件名=“函数名“
6.Vue指令v-model
在表单元素上使用，双向数据绑定，可以方便得到获取或设置表单项数据
v-model：-model=”变量名“
