创建实例
<div id=" app">
<!-- 这里将来会编写一些用于渲染的代码逻辑-->
{{ msg }}
</div>
<!-- 引入的是开发版本包，包含完整的注释和警告-->
<script src="https:/ /cdn. jsdelivr. net/npm/[email protected]/dist/vue.js"></script>
<script>
//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数
const app = new Vue({
//通过el配置选择器，指定Vue管理的是哪个盒子
el: '#app',
//通过data提供数据
data:{
msg:'Hello World'
}
})
</script>
插值表达式
含义：vue的一种模板语法
作用：利用表达式进行插值渲染
语法：{{表达式}}
注意：
- 使用的数据要存在
- 支持的是表达式，不是语句if for
- 不能在标签属性使用{{ }}
响应式特性
响应式数据：数据变化，视图自动更新
data中的数据，是会被添加到实例上
- 访问数据：实例.属性名
- 修改数据：实例.属性名=新值
Vue指令
v-html
作用：设置元素的innerHTML
语法：v-html = “表达式”
v-show
作用：控制元素显示隐藏
语法：v-show = "表达式” 表达式值true 显示，false 隐藏
底层原理：切换 css 的 display: none 来控制显示隐藏
适用场景：频繁切换显示隐藏的场景
v-if
作用：控制元素显示隐藏（条件渲染）
语法：v-if= "表达式" 表达式值 true 显示，false 隐藏
底层原理：根据判断条件控制元素的创建和移除（条件渲染）
适用场景：要么显示，要么隐藏，不频繁切换的场景
v-else & v-else-if
作用：辅助v-if 进行判断渲染
语法：v-else v-else-if = "表达式"
注意：需要紧挨着v-if一起使用
v-on
<button @click="count--">-</button>
<span>{{ count }}</span>
<button v-on:click="count++"> +</button>
作用：注册事件=添加监听+提供处理逻辑
语法：
① v-on：事件名 = "内联语句"
② v-on：事件名 = "methods中的函数名"
简写：@事件名
调用传参：
v-bind
作用：动态的设置html的标签属性 src url title …
语法：v-bind：属性名="表达式"
简写：：（冒号）+ src/url/title 等等
v-for
作用：基于数据循环，多次渲染整个元素：数组、对象、数字
遍历数组语法：v-for = "(item,index) in 数组" item 每一项，index 下标
key
语法：key属性 = "唯一标识"
作用：给列表项添加的唯一标识，便于Vue进行列表项的正确排序复用。
注意点：
- key的值只能是字符串或数字类型
- key的值必须具有唯一性
- 推荐使用id作为key（唯一）,不推荐使用index作为key（会变化，不对应）
<li v-for=" (item, index) in xxx" :key="（唯一值）item.id">
data: {
booksList: [
{ id: 1, name :'《红楼梦》' author :'曹雪芹'},
{ id: 2, name :'《西游记》' author :'吴承恩' },
{ id: 3, name:'《水浒传》' author:'施耐庵' },
{ id: 4, name: '《三国演义》' author :'罗贯中'
]}
v-model
作用：给表单元素使用，双向数据绑定 -> 可以快速获取或设置表单元素内容。
- 数据变化→视图自动更新
- 视图变化→数据自动更新
语法：v-model = '变量'
标签：Vue,基础,隐藏,语法,key,id,表达式 From： https://www.cnblogs.com/Feee/p/17552335.html