Vue(1)
概念
Vue 是一个用于构建用户界面的渐进式框架
两种使用方式
Vue 核心包开发
场景：局部 模块改造
Vue 核心包 & Vue 插件 工程化开发
场景：整站 开发
上手！
创建Vue实例初始化渲染
1. 准备容器
2. 引包 (官网) - 开发版本或者直接下载好Vue.js引用
3. 创建 Vue 实例 new Vue()
4. 指定配置项 → 渲染数据
① el 指定挂载点，选择器指定控制的是哪个盒子
② data 提供数据
<div id="app">
{{ msg }}
</div>
<script src="../vue.js"></script>
<script>
// 创建实例
const app=new Vue({
//el配置选择器
el:'#app',
data:{
msg:'Hello vue'
}
})
</script>插值表达式{{ }}
作用
利用表达式进行插值，渲染到页面中
表达式：是可以被求值的代码，JS引擎会将其计算出一个结果
语法
{{ 表达式 }}
注意
使用的数据必须存在
支持的是表达式，而非语句，比如if for
不能在标签属性中使用{{ }}插值
<div id="app"> <p>{{nickname}}</p> <p>{{nickname.toUpperCase()}}</p> <p>{{nickname+'你好'}}</p> <p>{{age>=18 ? '成年':'未成年'}}</p> <p>{{friend.name}}</p> </div> <script src="../vue.js"></script> <script> const app=new Vue({ el:'#app', data:{ nickname:'tony', age:18, friend:{ name:'jack', age:20 } } }) </script>
核心特性
响应式
数据改变，视图会自动更新
使用 Vue 开发，关注业务的核心逻辑，根据业务修改数据即可
如何访问或修改数据
data中的数据, 最终会被添加到实例上
访问数据： "实例.属性名"
修改数据： "实例.属性名" = "值"
Vue指令
v-html
作用
设置元素的 innerHTML
语法
v-html = "表达式 "
<div id="app">
<div v-html="msg">
</div>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
msg: `
<a href="https://www.bilibili.com/">bilibili</a>
`
}
})
</script>v-show
作用
控制元素显示隐藏
语法
v-show = "表达式" 表达式值 true 显示， false 隐藏
原理
切换 display:none 控制显示隐藏
场景
频繁切换显示隐藏的场景
v-if
作用
控制元素显示隐藏（条件渲染）
语法
v-if = "表达式" 表达式值 true 显示， false 隐藏
原理
基于条件判断，是否 创建 或 移除 元素节点
场景
要么显示，要么隐藏，不频繁切换的场景
<div id="app">
<div v-show="flag" class="box">我是v-show控制的盒子</div>
<div v-if="flag" class="box">我是v-if控制的盒子</div>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
flag: true//控制其显示还是隐藏
}
})
</script>v-else v-else-if
作用
辅助 v-if 进行判断渲染
语法
v-else v-else-if = "表达式"
注意
需要紧挨着 v-if 一起使用
<div id="app">
<p v-if="gender===1">性别：♂ 男</p>
<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 src="../vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
gender:2,
score:100
}
})
</script>v-on
作用
注册事件
语法
v-on:事件名 = "内联语句"
v-on:事件名 = "methods中的函数名"
简写
@事件名
注意
methods函数内的 this 指向 Vue 实例
<div id="app">
<button @click="count--">-</button>
<span>{{count}}</span>
<button v-on:click="count++">+</button>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
count:10
}
})
</script>调用传参
<button @click="fn(参数1,参数2)">按钮</button>
之后在script部分写好函数
<div id="app">
<div class="box">
<h3>小黑自动售货机</h3>
<button @click="buy(5)">可乐5元</button>
<button @click="buy(10)">咖啡10元</button>
</div>
<p>银行卡余额：{{money}}</p>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
money: 100
},
methods: {
buy(price) {
this.money -= price
}
}
})
</script>v-bind
作用
动态的设置html的标签属性 → src url title ...
语法
v-bind:属性名="表达式"
注意
简写形式 :属性名="表达式"
<div id="app">
<img v-bind:src="imgUrl" v-bind:title="msg" alt="">
<img :src="imgUrl" :title="msg" alt=""><!-- 简写 -->
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
imgUrl: 'imgs/10-01.png',
msg:'你好'
}
})v-for
作用
基于数据循环， 多次渲染整个元素
遍历数组语法
v-for = "(item, index) in 数组"
item 每一项， index 下标
省略 index: v-for = "item in 数组"
<div id="app">
<h3>小黑水果店</h3>
<ul>
<!-- 一定要空格 -->
<li v-for="(item,index) in list">
{{item}} - {{index}}</li>
</ul>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
list: ['西瓜', '苹果', '鸭梨','榴莲']
}
})
</script>key
语法
key属性 = "唯一标识"
作用
’给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用
<ul>
<li v-for="(item,index) in booksList" :key="item.id">
<span>{{item.name}}</span>
<span>{{item.author}}</span>
<button @click="del(item.id)">删除</button>
</li>
</ul>注意点
key 的值只能是 字符串 或 数字类型
key 的值必须具有 唯一性
推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）
v-model
作用
给 表单元素 使用, 双向数据绑定
数据变化 → 视图自动更新
视图变化 → 数据自动更新
语法
v-model = '变量'
<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="../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>