目录
一.Vue介绍
是一个前端开发过程中基于数据驱动的一个渐进式框架(数据驱动,不操作DOM结构,通过操作数据驱动DOM结构的渲染)
二.开发模式
Vue框架中封装的内容:MVVM中的VM,即视图和数据绑定。
M:全称Model，表示数据
V:全称View，表示视图，即页面显示内容
VM：全称ViewModel，即视图和数据绑定。数据改变驱动视图改变，视图改变驱动数据改变。
三.下载
1.下载Vue
//在命令窗口中输入
npm i Vue@2 //@2是指定版本2.引入文件
<script src="./node_modules/vue/dist/vue.min.js"></script>3.模版使用
const app = Vue.createApp({
data () {
return {
}
}
})mount('#app')4.显示数据
<div id="app">
<p>{{msg}}</p>
</div>5.完整页面结构
<body>
<div id="app">
<p>{{ str }}</p>
</div>
</body>
<script src="./node_modules/vue/dist/vue.global.js"></script>
<script>
/*
认识 vue
+ 目前市场的 vue 版本
=> Vue@2 - 一种语法
=> Vue@3
-> 语法A
-> 语法B
=> vue@3 的 A语法叫做 选项式 API
=> vue@3 的 B语法叫做 组合式 API
=> Vue@3 的选项式API 就是 Vue@2 的语法
*/
// 1. 创建一个 Vue 实例
const app = Vue.createApp({
data () {
return {
str: 'hello Vue',
}
}
}). mount('#app')
此时页面显示
hello Vue四.插值表达式
{{变量名、三元运算、字符串方法、函数调用、运算符等等 }}
五.指令
- 1.v-text-------同innerText含义相同表示内容但不包括标签
- 2.v-html-------解析便签
<div id="app">
<!-- 默认，v-text和插值表达式都不能解析标签 -->
<p v-text="jiaocheng"></p>
<p>{{jiaocheng}}</p>
<!-- v-html虽然能解析标签，但不建议使用 - 有安全隐患,xss攻击 -->
<p v-html="jiaocheng"></p>
</div>
<script>
const app = Vue.createApp({
data () {
return {
jiaocheng: '<b>js教程</b>'
}
}
}). mount('#app')
</script>- v-once------数据只发生一次
<div id="app">
<p v-once="jiaocheng"></p>
</div>
<script>
const app = Vue.createApp({
data () {
return {
jiaocheng: 'js教程'
}
}
}). mount('#app')
</script>- v-cloak----解决页面闪烁效果
<style>
[v-cloak]{
display: none;
}
</style>
<body>
<div id="app">
<!-- 解决闪烁问题 -->
<!-- v-cloak 属性是内容在渲染成功之前会显示，内容显示之后就会隐藏 -->
<!-- 利用这个指令的特性，用属性选择器给这个标签设置隐藏 -->
<p v-cloak>{{msg}}</p>
</div>
</body>
<script>
const app = Vue.createApp({
data () {
return {
msg:'hello Vue'
}
}
}). mount('#app')
</script>- v-bind---标签的属性值要使用定义好的数据，就可以给这个属性添加v-bind--简写:" : "
<body>
<div id="app">
<!-- 当标签上的属性要使用数据的时候，这个属性要被v-bind指令修饰 -->
<img v-bind:src="imgPath" v-bind:alt="msg">
<!-- 因为v-bind指令很常用，所以vue提供了一个简写语法：在属性前加冒号即可 -->
<img :src="imgPath" :alt="msg">
</div>
</body>
<script>
const app=Vue.createApp({
data: {
return{
msg: 'hello',
imgPath: 'https://t7.baidu.com/it/u=1109365764,3421420386&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=F4D07C85CE1275CC6B8C14A803003090&sec=1683306000&t=b140e9d2d68bba81068c66a29f5897da'
}
}).mount('#app')
</script>- v-on--绑定事件--简写@事件
<div id="app">
<div v-on:click="handler">123</div>
<div @click="handler">456</div>
</div>
<script>
const app= Vue.createApp
data () {
return {
handler: 'hello world'
}
},
methods: {
handler () {
console.log('你好 世界, 我是写在 methods 内的 handler 函数')
},
}
}).mount('#app')methods是Vue中的模版表达式
事件函数传参注意点：
$event - 事件对象
this - window
事件类型后可以有修饰符(在事件类型后.修饰符)：
stop - 阻止冒泡
prevent - 阻止默认行为
enter - 回车键
- v-for--遍历数组或对象
<div id="app">
<p>vue 的循环</p>
<ul>
<!-- 需要循环 list 数据创建 li -->
<li v-for="item in list">{{ item }}</li>
</ul>
<ul>
<!-- 需要循环 list 数据创建 li -->
<li v-for="(item, index) in list">{{ item }} ---- {{ index }}</li>
</ul>
<ul>
<!-- 需要循环 list 数据创建 li -->
<li v-for="item in num">{{ item }}</li>
</ul>
<ul>
<!-- 需要循环 list 数据创建 li -->
<li v-for="item in str">{{ item }}</li>
</ul>
<ul>
<!-- 需要循环 list 数据创建 li -->
<li v-for="item in cart">{{ item.id }}</li>
</ul>
</div>
<script src="./node_modules/vue/dist/vue.global.js"></script>
<script>
/*
Vue 的循环
+ 万物皆可循环
+ 循环使用的指令 v-for
+ 语法: <标签 v-for="(每一项, 索引) in 循环的内容"></标签>
=> 如果只需要每一项, 可以不接受第二个形参
*/
const { createApp } = Vue
createApp({
data () {
return {
list: [ 100, 200, 300, 400 ],
num: 6,
str: 'hello',
cart: [ { id: 1 }, { id: 2 }, { id: 3 } ]
}
}
}).mount('#app')- v-if--判断语句/v-show--控制标签显示隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
form {
width: 500px;
padding: 20px;
border: 10px solid pink;
border-radius: 10px;
margin: 50px auto;
}
form > label {
height: 60px;
position: relative;
display: block;
}
form > label > span {
height: 20px;
position: absolute;
left: 0;
bottom: 10px;
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<div id="app">
<div class="header">
<p v-if="boo">您好 <a href="">请登录</a></p>
<!-- <p v-else>您好 <span>xxx</span><a href="">个人中心</a><button>退出登录</button></p> -->
<p v-if="!boo">您好 <span>xxx</span><a href="">个人中心</a><button>退出登录</button></p>
</div>
<p>Vue 的条件分支</p>
<input type="text" v-model="search">
<!-- 根据 search 这个内容决定该 div 是否渲染 -->
<div v-if="search">
我是相关搜索内容的展示盒子 v-if
</div>
<div v-show="search">
我是相关搜索内容的展示盒子 v-show
</div>
<form>
<label>
用户名: <input type="text" v-model="username">
<span v-if="usernameBoo">用户名不符合规则, 请重新填写 ^_^</span>
</label>
</form>
</div>
<script src="./node_modules/vue/dist/vue.global.js"></script>
<script>
/*
vue 的条件分支
需求约定 :
+ search 有内容的时候, div 展示
+ search 没有内容的时候, div 隐藏
利用一个叫做 v-if 的指令
+ <标签 v-if="条件"></标签>
+ 意义: 如果这个条件为 true, 该标签 **渲染**, 否则 **不渲染**
利用一个叫做 v-show 的指令
+ <标签 v-show="条件"></标签>
+ 意义: 如果这个条件为 true, 改标签的 display 为 block, 否则为 none
区别:
+ v-if: 渲染不渲染(有没有这个标签)
+ v-show: 显示不显示(display 是不是 none)
区别:
+ v-if 是个组合指令
=> v-else-if
=> v-else
+ v-show 只有自己一个
*/
const { createApp } = Vue
createApp({
data () {
return {
search: '',
boo: true,
usernameBoo: false,
username: ''
}
},
watch: {
username (newVal, oldVal) {
this.usernameBoo = !/^\w{6,12}$/.test(newVal)
}
}
}).mount('#app')
</script>
</body>
</html>
v-else和v-else-if必须紧跟v-if所在标签
·v-model--视图和数据双向绑定
<body>
<div id="app">
<p>双向数据绑定</p>
<p>{{ str }}</p>
<button @click="clickHandler">修改 str</button>
<!-- 从一个实际需求触发: 搜索框 -->
<!-- 随着你写入的内容不一样, 随时更改搜索的内容 -->
<input type="text" @input="inputHandler" :value="str">
<p>{{ info }}</p>
<input type="text" v-model="info">
</div>
<script src="./node_modules/vue/dist/vue.global.js"></script>
<script>
/*
双向数据绑定
+ 把数据中的某一项内容渲染在也 页面视图 内
=> 随着数据的变化让 视图 发生变化
+ 捕获到你在修改表单的行为
=> 随着视图的变化, 随时让数据发生变化
+ Vue 给出了对应的指令 v-model
=> <标签 v-model="变量"></标签>
=> 直接帮你实现双向数据绑定
-> 实现原理 : v-on:input 和 v-bind:value 配合在一起使用
响应式
+ 当数据发生变化的时候, 会自动讲结果响应的视图位置
+ 讲视图进行修改
*/
const { createApp } = Vue
createApp({
data () {
return {
str: 'hello',
info: ''
}
},
methods: {
clickHandler () {
this.str = '修改后'
},
inputHandler (e) {
console.log('你写入的内容发生了变化')
console.log(e.target.value)
this.str = e.target.value
}
}
}).mount('#app')
</script>
1816
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
