Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
<!-- 1. 提供容器 -->
<div class="app">
<input type="text" v-model="str">
<p>{{str}}</p>
</div>
<!-- 2.引入 -->
<script src="./vue.js"></script>
<script>
// 3. 模拟数据
let data = 'abc';
let vm = new Vue({
// 4. 设置Vue的选项
el: '.app',
data: {
str: data
}
});
</script>
| 基础-实例选项-EL |
|---|
作用：当前vue实例所管理的html视图 |
值：通常是id选择器（或者是一个dom对象） |
| 注意！！！不要让el所管理的视图是html或者是body |
| 基础-实例选项-DATA |
|---|
| Vue 实例的data（数据对象），是响应式数据（数据驱动视图） |
| 1.data中的值{数据名字：数据的初始值} |
| 2.data中的数据msg/count可以在视图中通过{{msg/count}}访问数据 |
| 3.data中的数据也可以通过实例访问vm.msg或者vm.$data.msg |
| 4.data中的数据特点：响应式的数据->data中的数据一旦发生变化->视图中使用该数据的位置就会发生变化 |
<div id="app">
<p>{{msg}}</p>
<p>{{count}}</p>
<p>{{list}}</p>
</div>
<script src="./vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data: {
msg: '铁蛋儿',
count: 100,
list: [1,2,3]
}
})
vm.count = 200
vm.list.push(4)
console.log(vm)
console.log(vm.msg)
console.log(vm.$data.msg)
</script>
| 基础-实例选项-METHODS |
|---|
掌握实例选项methods中方法的使用及注意事项： |
| methods其值为一个对象 |
可以直接通过VM实例访问这些方法，或者在指令表达式中使用 |
方法中的this自动绑定为Vue实例 |
methods中所有的方法同样也被代理到了Vue实例对象上，都可以通过this访问 |
注意，不应该使用箭头函数来定义method函数。理由是箭头函数绑定了父级作用域的上下文，所以this将不会按照期望指向Vue实例 |
<div id="app">
{{fn()}}
<p>{{count}}</p>
<button v-on:click="fn1">点击增加</button>
</div>
<script src="./vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data: {
count: 100
},
methods: {
fn: function(){
console.log('我被调用了')
},
fn1(){
this.count++
}
}
})
</script>
| 理解和使用插值表达式 |
|---|
| 基础-术语解释-插值表达式（重要） |
| 作用：会将绑定的数据实时的显示出来 |
| 形式：通过{{插值表达式}}包裹的形式 |
| 用法：{{js表达式、三元运算符、方法调用等}} |
<div id="app">
<p>{{1+2+3}}</p>
<p>{{1>2}}</p>
<p>{{name+'很帅'}}</p>
<p>{{count+1}}</p>
<p>{{count === 1?"成立":"不成立"}}</p>
<p>{{list}}</p>
</div>
<script src="./vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
name: '小屁孩',
count: 1,
list: [1,2,3].reverse()
}
})
</script>
| 基础-术语解释-指令（重要） |
|---|
指令（Directives）是带有v-前缀的特殊特性 |
指令特性的值预期是单个JavaScript表达式（v-for是例外情况，我们稍后再讨论） |
| 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式的作用于DOM |
| 指令位置：起始标签 |
| 基础-系统指令-V-TEXT和V-HTML |
|---|
| 很像innerText和innerHTMLv-text：更新标签中的内容 |
| v-text：更新标签中的内容 |
| v-text和插值表达式的区别： |
| v-text 更新 整个 标签中的内容 |
| 插值表达式：更新标签中局部的内容 |
| 可以渲染内容中的html标签 |
<div id="app">
<p v-text="msg">我是小白龙 {{我是铁蛋儿}}</p>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '我是铁蛋儿'
}
})
</script>
| 基础-系统指令-V-IF和V-SHOW |
|---|
| 使用：v-if和v-show后面跟着表达式的值是布尔值，布尔值来决定该元素显示隐藏 |
| 注意：v-if是直接决定元素的 添加 或者删除 而 v-show只是根据样式来决定 显示隐藏 |
v-if 有更高的切换开销 |
v-show 有更高的初始渲染开销 |
如果我们需要非常频繁地切换，则使用v-show较好 |
如果在运行时条件很少改变，则使用v-if较好 |
<div id="app">
<p v-if="isShow">我是小白龙</p>
<p v-show="isShow">我是铁蛋儿</p>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
isShow: false
}
})
</script>
| 基础-系统指令-V-ON绑定事件 |
|---|
| 使用： |
| 第一种：v-on：事件名="方法名" |
| 第二种：@事件名="方法名"的方式 |
// v-on:xx事件名='当触发xx事件时执行的语句' <button v-on:click="fn">按钮</button>
// v-on的简写方法
<button @click="fn">按钮</button>
//修饰符
使用:@事件名.修饰符="方法名"
.once - 只触发一次回调
.prevent - 调用 event.preventDefault() 阻止默认事件
// v-on修饰符 如 once: 只执行一次
<button @click.once="fn">只执行一次</button>
// v-on修饰符 如 prevent: 阻止默认事件 <button @contextmenu.prevent="fn">阻止默认事件</button>
| 基础-系统指令-V-FOR（数组） |
|---|
| v-for指令基于一个数组来渲染一个列表 |
| v-for语法item in items 或者 item of items |
| 其中items是源数据数组 而 item则是被迭代的数组元素的别名 |
<div id="app">
<p v-for="item in list">{{item}}</p>
<p v-for="(item,index) in list" :key="index">{{item}}---{{index}}</p>
<p v-for="item in json">{{item}}</p>
<p v-for="(item,key) in json">{{item}}--{{key}}</p>
<p v-for="(item,key,index) in json">{{item}}--{{key}}--{{index}}</p>
</div>
<script src="./vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
list: ['a', 'b', 'c'],
json: {
name: '铁蛋儿',
age: 18
}
}
})
</script>
标签：count,el,Vue,适合,vm,易上,实例,data
来源： https://blog.csdn.net/qq_57469718/article/details/121728968