使用vue 首先我们要认识到,vue是一个是构建用户界面的渐进式 JavaScript 框架. 它既然是一个基于JavaScript的框架,所以他的基本语法不会违背JS的规范.另外在学习Vue时我们也要认识到它自己独特的语法,我们作为Vue的使用者也要严格遵照它的规则.
今天我稍微总结一下工作中常用的基础Vue指令 1.创建Vue 实例对象
<div id="app">
//该盒子就是Vue控制的区域
{{ msg }}
</div>
const app = new Vue({
// 指定 Vue 管理的区域
el: '#app',
// 数据
data: {
msg: 'Hello world!'
}
})
2.插值表达式 语法：{{ 表达式 }} 注意点:表达式 有值 ,不是语句
div id="app">
<p>{{ nickname }}</p>
<p>{{ nickname.substring(2) }}</p>
<p>{{ age >= 18 ? '成年' : '未成年' }}</p>
<p>{{ friend.name }} ---- {{ friend.desc }}</p>
<!-- <p>{{ gender }}</p> -->
<!-- <p>{{ if (age >= 18) { console.log(123) } }}</p> -->
<!-- <a href="{{ url }}">去百度</a> -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
nickname: '王五',
age: 15,
friend: {
name: '张三',
desc: '热爱学习 Vue'
},
url: 'http://www.baidu.com'
}
})
3.v-html 设置标签内容 同获取标签.innerHTML 优先级高于标签内容
<div id="app">
<div>{{ msg }}</div>
<!--
v-html: 设置元素的 innerHTML
v-html="表达式"
注意: 如果使用了 v-html 则标签内不能再写内容了, 会被 v-html 的结果覆盖掉
-->
<div v-html="msg">123</div>
const app = new Vue({
el: '#app',
data: {
msg: '<h1>献给每一个可爱的程序猿</h1>'
}
})
4.v-show 和v-if 控制元素显示和隐藏 原理:v-show 底层原理: 通过设置 display: none 来改变盒子的显示状态 v-if 底层原理: 通过创建 / 删除 DOM 元素来实现盒子的显示隐藏
<div id="app">
<div v-show="isShow" class="box">我是v-show控制的盒子</div>
<div v-if="isShow" class="box">我是v-if控制的盒子</div>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
isShow: false
}
</script>
5.v-if 和 v-else 注意点: 必须紧挨着,中间不能插入其他元素标签
div id="app">
<!--
v-if 和 v-else 注意事项:
v-else 必须紧贴着 v-if 来编写, 中间不能有任何标签间隔 (注释除外)
-->
<p v-if="gender === 1">性别：♂ 男</p>
<!-- 你好我是注释 -->
<!-- <br> -->
<p v-else>性别：♀ 女</p>
<hr>
<p v-if="score >= 90">成绩评定A</p>
<p v-else-if="score >= 70">成绩评定B</p>
<p v-else-if="score >= 60">成绩评定C</p>
<p v-else>成绩评定D</p>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
gender: 2,
score: 95
}
})
</script>
6.v-on语法 后接绑定事件类型 下面以click事件为例子 v-on:事件名="内联语句" 适合极其简单的场景, 一行代码就搞定 v-on:事件名="事件处理函数" 适合复杂的逻辑处理 可以简写 @事件名="事件处理函数" 处理函数可以传参数 参数是实参
<div id="app">
<button @click="count--">-</button>
<span>{{ count }}</span>
<button @click="count++">+</button>
</div>
<script>
// 目标: 点击 - 让数字减一, 点击 + 让数字加一
const app = new Vue({
el: '#app',
data: {
count: 100
}
})
</script>
7.@click="事件处理函数" 事件处理函数写在 Vue实例 的属性methods里面
const app = new Vue({
el: '#app',
data: {
money: 100
},
methods: {
buy(price) {
// console.log('我买东西了')
this.money -= price
}
}
})
8.v-bind
v-bind: 动态设置标签属性的
v-bind:属性名="表达式"
可以简写:属性名="表达式"
<div id="app">
<img :src="imgUrl" :title="msg" alt="">
<div>
<script>
const app = new Vue({
el: '#app',
data: {
imgUrl: '图片路径',
msg: 'hello world!'
}
})
</script>
9.v-for="(每一项, 索引) in 数组" 配合v-bind:key="唯一的id" 使用方法
<div id="app">
<h3>书架</h3>
<ul>
<li v-for="(item, index) in booksList" :key="item.id">
<input type="checkbox">
<span>{{ item.name }}</span>
<span>{{ item.author }}</span>
<button @click="del(item.id)">删除</button>
</li>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
booksList: [
{ id: 1, name: '《红楼梦》', author: '曹雪芹' },
{ id: 2, name: '《西游记》', author: '吴承恩' },
{ id: 3, name: '《水浒传》', author: '施耐庵' },
{ id: 4, name: '《三国演义》', author: '罗贯中' }
]
},
methods: {
del(id) {
this.booksList = this.booksList.filter(item => item.id !== id)
}
}
})
</script>
10.v-model v-model 可以让数据和视图，形成双向数据绑定 1. 数据变化，视图自动更新 2. 视图变化，数据自动更新 可以快速获取或设置表单元素的内容
<div id="app">
账户：<input type="text" v-model="username"> <br><br>
密码：<input type="password" v-model="password"><br><br>
<button @click="login">登录</button>
<button @click="reset">重置</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username: '',
password: ''
},
methods: {
login() {
console.log(this.username, this.password)
},
reset() {
this.username = ''
this.password = ''
}
}
})
</script>
