插值表达式!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!--
创建实例:
准备容器->引包->创建实例->渲染数据 el挂载点 data
-->
<!--
利用表达式进行插值渲染
{{ 表达式 }}
-->
<body>
<div id="app">
{{ message }}
<p>{{ message }}</p>
<p>{{ age }}</p>
{{ chinese.name }}
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello vue!',
age: 1,
chinese: {
name: '你好!'
}
}
})
</script>
</body>
</html>
Vue指令!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!--
v-html:动态解析标签
v-show/v-if:通过正确与否判断:
v-show:靠切换css的display:none来控制显示隐藏;适用于频繁切换显示隐藏的场景
v-if:靠根据判断控制元素的创建和移除;适用于不频繁切换的场景,要么显示要么隐藏
v-else/v-else-if紧挨着v-if使用:
v-else:表否定
v-else-if:再次判断==或则另一种情况的判断
v-on指令:注册事件=添加监听+提供处理逻辑
v-on:事件名="内联语句"
v-on:事件名="methods中的函数名fn"
v-on:事件名="methods中的函数名fn(参数)"
v-on:<===>@事件名
v-bind:动态设置html的标签属性--》src url tirle
v-for:基于数据循环,多次渲染整个元素--》数组,对象,数字...
v-for = "(item,index) in 数组"--(未用到index时可以省略)
-->
<body>
<div id="app">
{{msg}}
<div v-html="msg"></div>
<hr>
<div v-show="flag">v-show</div>
<div v-if="flag02">v-if</div>
<hr>
<p v-if="gender === 1">性别:男</p><p v-else>性别:女</p>
<div v-if="score >= 90">A等</div>
<div v-else-if="score >= 60">B等</div>
<div v-else>C等</div>
<hr>
<button v-on:click="count--">-</button>
<span>{{ count }}</span>
<button @click="count++">+</button>
<hr>
<button @click="fn">登录</button>
<h5 v-show="login">请您先登录</h5>
<hr>
<p>零食贩卖机!!!</p>
<div>
<button @click="shopping(15)">可乐15元</button>
<button @click="shopping(19)">牛奶19元</button>
</div>
<div>
<button @click="shopping(66)">炸鸡66元</button>
<button @click="shopping(19)">汉堡19元</button>
</div>
<div>余额:{{ money }}</div>
<hr>
<div>
<img v-bind:src="url" alt="">
<img v-bind:src="url02" alt="">
</div>
<hr>
<p>水果店</p>
<ul>
<li v-for="(item,index) in list">
{{ item }}
</li>
</ul>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
msg:
'<a href="https://www.baidu.com">百度</a> ',
flag: false,
flag02: true,
gender: 2,
score: 90,
count: 100,
login: true,
money: 666,
url: './image/01.webp',
url02: './image/02.webp',
list: ['苹果','草莓','西瓜']
},
methods: {
fn(){
//this指向当前实例(app.login=this.login)
app.login = !app.login
},
shopping(price){
this.money -= price
}
}
})
</script>
</body>
</html>
图片切换案例!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button v-show="index > 0" @click="index--">上一页</button>
<img v-bind:src="list[index]" alt="">
<button v-show="index < list.length-1" @click="index++">下一页</button>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
index: 0,
list:[
'./image/01.webp',
'./image/02.jpg',
'./image/03.jpg',
'./image/04.jpg',
'./image/05.jpg',
]
}
})
</script>
</body>
</html>
图书管理案例!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>图书管理</p>
<ul>
<li v-for="item in bookList">
<span>{{ item.name }}</span>
<span>{{ item.author }}</span>
<!--注册点击事件->通过id进行删除数组中的对应项-->
<button @click="del(item.id)">删除</button>
</li>
</ul>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data:{
bookList:[
{id: 1, name:'《西游记》', author: '吴承恩'},
{id: 2, name:'《西游记》', author: '吴承恩02'},
{id: 3, name:'《西游记》', author: '吴承恩03'},
{id: 4, name:'《西游记》', author: '吴承恩04'}
]
},
methods: {
del(id){
//通过id进行删除数据中的对应项->filter
//filter:根据条件,保留满足条件的对应项,得到一个新数组
//=>:箭头(需要保留的数据)
this.bookList=this.bookList.filter(item => item.id != id)
}
}
})
</script>
</body>
</html>