Vue（1）之 插值绑定与内置指令
1、Vue-插值绑定<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.profile {display: inline-block;width: 200px;}</
·
1、Vue-插值绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.profile {
display: inline-block;
width: 200px;
}
</style>
</head>
<body>
<div id="app">
<h2>文本插值</h2>
<p><label class="profile">变量： </label>{{ num }}</p>
<p><label class="profile">表达式： </label>{{ 5 + 10 }}</p>
<p><label class="profile">三目运算符： </label>{{ TrueStr ? 15 : 10 }}</p>
<p><label class="profile">方法： </label>{{ addNum }}</p>
<p><label class="profile">函数： </label>{{ getNum() }}</p>
<p><label class="profile">匿名函数： </label>{{ (() => 5 + 10)() }}</p>
<p><label class="profile">对象： </label>{{ {num: 15} }}</p>
<p><label class="profile">函数对象： </label>{{ getNum }}</p>
<p><label class="profile">HTML代码（表达式）： </label>{{ '<span style="color: red">15</span>' }}</p>
<p><label class="profile">HTML代码（变量）： </label>{{ html }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
num: 15,
TrueStr: true,
html: '<span style="color: red">15</span>',
},
computed: { // 多次调用，只计算一次
addNum: function () {
return 5 + 10
}
},
methods: { // 多次调用，多次计算
getNum() {
return this.num
}
}
})
</script>
</body>
</html>
2、v-html（渲染）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.align-center {
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<h2>#v-html</h2>
<!-- 未渲染直接输出 -->
<div>{{ blog }}</div>
<hr>
<!-- 渲染后，才输出 -->
<div v-html="blog"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
blog: '<h2 class="align-center">学习Vue笔记</h2><div class="align-center"><img src="https://cn.vuejs.org/images/logo.png" height="200" width="200" alt="logo img"></div><p>Vue (读音 /vjuː/，类似于 <strong>view</strong>) 是一套用于构建用户界面的<strong>渐进式框架</strong>。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p>'
},
computed: { // 多次调用，只计算一次
},
methods: { // 多次调用，多次计算
}
})
</script>
</body>
</html>
3、v-bind（属性绑定）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.italic{
font-style: italic;
}
</style>
</head>
<body>
<div id="app">
<h2>#v-bind</h2>
<!-- 完整情况 -->
<p v-bind:class="className" v-bind:title="titleName">危险勿触</p>
<button v-bind:disabled="10+10===20">点击有奖</button>
<input v-bind:type="'text'" v-bind:placeholder="true?'请输入':'请录入'">
<!-- 省略情况：v-bind: 可以省略为 : -->
<p :class="className" :title="titleName">危险勿触</p>
<button :disabled="10+10===20">点击有奖</button>
<input :type="'text'" :placeholder="true?'请输入':'请录入'">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
className: 'italic',
titleName: '危险勿触'
},
computed: { // 多次调用，只计算一次
},
methods: { // 多次调用，多次计算
}
})
</script>
</body>
</html>
3.1、类名和样式绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.color-gray { color: orangered; }
.size-18 { font-size: 18px; }
.style-italic { font-style: italic; }
</style>
</head>
<body>
<div id="app">
<h2>#v-bind</h2>
<p class="color-gray size-18 style-italic">《Vue.Js 从入门到入土》</p>
<p :class="classStr">《Vue.Js 从入门到入土》</p>
<p :class="classArr">《Vue.Js 从入门到入土》</p>
<p :class="classObj1">《Vue.Js 从入门到入土》</p>
<p :class="classObj2">《Vue.Js 从入门到入土》</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
classStr: 'color-gray size-18 style-italic',
classArr: ['color-gray', 'size-18', 'style-italic'],
classObj1: {
'color-gray': true,
'size-18': true,
'style-italic': true
},
classObj2: {
'color-gray': 0,
'size-18': '',
'style-italic': false
},
},
computed: { // 多次调用，只计算一次
},
methods: { // 多次调用，多次计算
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>#v-bind</h2>
<p style="color: hotpink; font-size: 18px; font-style: italic">《Vue.Js 从入门到入土》</p>
<p :style="styleStr">《Vue.Js 从入门到入土》</p>
<p :style="styleObj1">《Vue.Js 从入门到入土》</p>
<p :style="styleObj2">《Vue.Js 从入门到入土》</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
styleStr: 'color: hotpink; font-size: 18px; font-style: italic',
styleObj1: {
'color': 'hotpink',
'font-size': '18px',
'font-style': 'italic'
},
styleObj2: {
'color': 0 ? 'hotpink' : 'orangered',
'font-size': '' ? '18px' : '25px',
'font-style': null ? 'italic' : ''
},
},
computed: { // 多次调用，只计算一次
},
methods: { // 多次调用，多次计算
}
})
</script>
</body>
</html>
4、v-on（事件绑定）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.align-center {
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<h2>#v-on</h2>
<!-- 完整情况 -->
<button v-on:click="logInfo()">打印消息（Hello Vue.Js!）</button>
<br>
<button v-on:click="logInfo('Self Message~')">打印消息（Self Message~）</button>
<br>
<!-- 省略情况：v-on: 可以省略为 @ -->
<button @click="logInfo()">打印消息（Hello Vue.Js!）</button>
<br>
<button @click="logInfo('Self Message~')">打印消息（Self Message~）</button>
<br>
<!-- 获取事件对象本身 -->
<input type="text" @keyup="handleKeyUp">
<br>
<input type="text" @keyup="handleKeyUp($event)">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
},
computed: { // 多次调用，只计算一次
},
methods: { // 多次调用，多次计算
logInfo (msg) {
console.log(msg || 'Hello Vue.Js!')
},
handleKeyUp (event) {
console.log(event.key, event)
}
}
})
</script>
</body>
</html>
5、v-model（双向绑定）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style></style>
</head>
<body>
<div id="app">
<h2>#v-model</h2>
<h3>单行文本</h3>
<input v-model="singleText" style="width: 260px" type="text">
<p>{{ singleText }}</p>
<hr>
<h3>多行文本</h3>
<textarea v-model="multiText" style="width: 260px"></textarea>
<pre>{{ multiText }}</pre>
<hr>
<h3>多元素，单选框</h3>
<input id="ra1" v-model="radioValue" type="radio" value="杨玉环">
<label for="ra1">A.杨玉环</label>
<input id="ra2" v-model="radioValue" type="radio" value="赵飞燕">
<label for="ra2">B.赵飞燕</label>
<p>{{ radioValue }}</p>
<hr>
<h3>单个复选框，True或False切换</h3>
<input id="ch" v-model="toggleValue" type="checkbox">
<p>{{ toggleValue }}</p>
<hr>
<h3>多个复选框，可以多选</h3>
<input id="ch1" v-model="checkedValues" type="checkbox" value="漂亮">
<label for="ch1">A.回眸一笑百媚生</label>
<input id="ch2" v-model="checkedValues" type="checkbox" value="瘦弱">
<label for="ch2">B.体轻能为掌上舞</label>
<input id="ch3" v-model="checkedValues" type="checkbox" value="得宠">
<label for="ch3">C.三千宠爱在一身</label>
<p>{{ checkedValues.join(', ') }}</p>
<hr>
<h3>单选下拉选择框</h3>
<select v-model="singleSelect">
<!-- 如果没有设置value，则option节点的文本会被当做value值 -->
<option value="汉代">汉代</option>
<option value="唐代">唐代</option>
</select>
<p>{{ singleSelect }}</p>
<hr>
<h3>多选下拉选择框</h3>
<select v-model="multiSelect" multiple>
<!-- 按住Ctrl键，可执行行多选 -->
<option value=1>出身卑微</option>
<option value=2>饱受争议</option>
<option :value="3">结局凄凉</option>
</select>
<p>{{ multiSelect.join(', ') }}</p>
<hr>
<h3>v-model与修饰符</h3>
<!-- .trim：过滤输入的首位空格；.number：自动转换用户输入的数值类型 -->
<input v-model.trim.number="inputtext" type="text" @keyup="handleKeyUp">
</div>
<script src="VueJs/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
inputtext: '',
singleText: '',
multiText: '',
radioValue: '',
toggleValue: false,
checkedValues: [],
singleSelect: '唐代', // 可以设置默认值，或者没有默认值
multiSelect: []
},
computed: { // 多次调用，只计算一次
},
methods: { // 多次调用，多次计算
handleKeyUp() {
console.log(this.inputtext, typeof this.inputtext);
}
}
})
</script>
</body>
</html>
6、v-if、v-show（条件渲染）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style></style>
</head>
<body>
<div id="app">
<h2>#v-if</h2>
<h2 v-if="order === 0"> 站在最前面的 v-if</h2>
<h2 v-else-if="order === 1"> 不上不下的 v-else-if</h2>
<h2 v-else> 负责垫后的 v-else</h2>
<button @click="toggleTitle">切换标题</button>
<hr>
<h2>#v-show</h2>
<h2 v-show="visible">v-show：visible = true</h2>
<h2 v-show="!visible">v-show：visible = false</h2>
<h2 v-if="visible">v-if：visible = true</h2>
<h2 v-else>v-if：visible = false</h2>
</div>
<script src="VueJs/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
order: 0,
visible: true
},
computed: { // 多次调用，只计算一次
},
methods: { // 多次调用，多次计算
toggleTitle() {
this.order = ++this.order % 3
console.log('this.order的值为：' + this.order);
}
}
})
</script>
</body>
</html>
7、v-for（列表渲染）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style></style>
</head>
<body>
<div id="app">
<h2>#v-for</h2>
<div style="float: left; width: 160px">
<h2>用户列表：in</h2>
<ul>
<li v-for="(item, index) in users">{{ index }}. {{ item.name }}</li>
</ul>
</div>
<div style="margin-left: 170px;overflow: hidden">
<h2>用户列表：of</h2>
<ul>
<li v-for="(user, uindex) of users">{{ uindex }}. {{ user.name }}</li>
</ul>
</div>
<hr>
<div>
<h2>用户列表：键值对</h2>
<ul>
<li v-for="(user, index) in users">
用户{{ index + 1 }}
<ul>
<li v-for="(val, key) in user">{{ key }}：{{ val }}</li>
</ul>
</li>
</ul>
</div>
</div>
<script src="VueJs/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
users: [
{
name: '张三',
age: 15,
city: '张家屯'
},
{
name: '赵四',
age: 48,
city: '纽腰'
}
]
},
computed: { // 多次调用，只计算一次
},
methods: { // 多次调用，多次计算
}
})
</script>
</body>
</html>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献12条内容
所有评论(0)