1 vue指令分类
2 内容渲染指令
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
<p v-text="username">p>
<p v-text="gender">性别p>
<hr>
<p>姓名: {{username}}p>
<p>性别: {{gender}}p>
<hr>
<div v-text="info">div>
<div>{{info}}div>
<hr>
<div v-html="info">div>
div>
<script src="./lib/vue-2.6.12.js">script>
<script>
// 2. 创建 Vue 的实例对象
const vm = new Vue({
el: '#app',
data: {
username: 'zhangsan',
gender: '女',
info: '欢迎大家来学习vue.js
'
}
})
script>
body>
html>
3 属性绑定指令
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
<input type="text" placeholder="tips">
<input type="text" placeholder="{{tips}}">
<input type="text" v-bind:placeholder="tips">
<hr>
<img v-bind:src="photo" style="width: 150px;">
<img :src="photo" style="width: 150px;">
<hr>
<div>1 + 2 的结果是：{{ 1 + 2 }}div>
<div>{{ tips }} 反转的结果是：{{ tips.split('').reverse().join('') }}div>
<div :title="'box' + index">这是一个 divdiv>
div>
<script src="./lib/vue-2.6.12.js">script>
<script>
const vm = new Vue({
el: '#app',
data: {
tips: '请输入用户名',
photo: 'https://cn.vuejs.org/images/logo.svg',
index: 3
}
})
script>
body>
html>