1.Vue.js的优点
- 体积小：压缩后只有33k；
- 更高的运行效率：基于虚拟DOM，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这种DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM；
- 双向数据绑定：让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上；
- 生态丰富、学习成本低：市场上拥有大量成熟、稳定的基于vue.js的ui框架及组件，拿来即用实现快速开发；对初学者友好、入门容易、学习资料多
2.插值表达式
使用 {{XXXX}} ，来替换固定值，在下方data（）{}内写数据。可以把静态值变为动态值。
支持字符·数字 内容部分可以进行运算，包括数学运算和字符拼接。也可使用三元运算。
数据部分支持使用{}包裹数据，多条数据用，间隔。访问时使用名称点的形式进行访问。
可以调用功能函数。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id = "app">
<h1>差值表达式</h1>
<label >欢迎语：</label><label>{{message}}</label><br>
<label >姓名：</label><label>{{person.name}}</label><br>
<label >年龄：</label><label>{{person.age}}</label> <br>
<label >性别：</label><label>{{person.gender? '男' : '女'}}</label> <br>
<!-- 进行三元运算-->
<label >{{a}}/{{a}}:</label><label>{{a/b}}</label><br><!-- 除非运算-->
<label >欢迎语：</label><label>{{message.toUpperCase()}}</label><br><!-- 转大写-->
<label >欢迎语：</label><label>{{message.toLowerCase()}}</label><br><!-- 转小写-->
</div>
<script>
const {createApp} = Vue;
createApp({
data(){//数据部分
return{
message:'HelloWorld',
person:{
name:'张三',
age:20,
gender:1,
},
a:10,
b:2
}
}
}).mount('#app')//绑定
</script>
</div>
</body>
</html>效果图：
3.强制绑定
强制数据绑定可以将value的数据与数据区进行绑定，绑定方式有两种。
v-bind:value="变量名"和
:value="变量名"<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>{{title}}</h1>
<p>
<label >用户名</label><input type="text" v-bind:value="username"><!--绑定方式1-->
</p>
<p>
<label >密 码</label><input type="text" :value="password"><!--绑定方式2-->
</p>
</div>
<script>
const {createApp} = Vue;
createApp({
data() {
return {
title: '强制数据绑定',
username: 'admin',
password: '123456'
}
}
}).mount('#app');
</script>
</body>