1.入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue.js -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 定义一个根标签，交由vue来管理这块区域 -->
<div id="box">
<h1>{
{msg}}</h1>
</div>
</body>
</html>
<script type="text/javascript">
//创建vue实例，传入配置选项
const vm = new Vue({
el: '#box',
data: {
msg: 'Hello Vue'
}
})
</script>
运行结果如图：
2.模板语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue.js -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 定义一个根标签，交由vue来管理这块区域 -->
<div id="box">
<!-- {
{}} vue提供的一个模板语法，可以用来取数据 -->
<h1>{
{msg}}</h1>
<h1>{
{num}}</h1>
<!-- 模板语法可以支持一些运算符 -->
<h1>{
{num+10-5}}</h1>
<h1>{
{num>800}}</h1>
<!-- 模板语法可以支持三元表达式 -->
<h1>{
{num==2021?'真':'假'}}</h1>
<!-- 模板语法支持调用js内置对象的属性方法 -->
<h1>{
{msg.length}}</h1>
<h1>{
{msg.toLowerCase()}}</h1>
<!-- 一般情况下，我们只是使用模板语法，来取数据展示，不太对数据再进行调用方法或运算 -->
</div>
</body>
</html>
<script type="text/javascript">
//创建vue实例，传入配置选项
const vm = new Vue({
el: '#box',
data: {
msg: 'Hello Vue',
num: 2021
}
})
</script>
运行结果如图：
3.基本指令
<!-- v-text 把数据渲染到标签 -->
<h1 v-text="test"></h1>
<!-- v-text 不会对html标签进行解析，只是普通字符串 -->
<h1 v-text="test"></h1>
<!-- 会对html标签进行解析 -->
<h1 v-html="test"></h1>
<!--可以绑定标签的属性，绑定了，这个属性的值，就可以用vue的数据-->
<img v-bind:src="url" >
<!-- 用来绑定事件，如果传递参数，事件函数名后面的括号可以省略不写 -->
<button type="button" v-on:click="test">按钮</button>
<!-- 可以缩写，使用@符号来替代v-on -->
<button type="button" @click="haha">一个按钮</button>
<!-- 如果对表单项进行数据的绑定 使用 v-model，
数据的双向绑定，数据变----视图变，视图变----数据变 -->
<input type="text" id="" value="" v-model="msg" />
<!-- {
{msg}} v-pre 让vue不要去解析{
{}} 保持原有的内容 -->
<h1 v-pre>{
{msg}}</h1>
<!-- 如果标签上有v-cloak属性，就让这个标签隐藏 -->
<h1 v-cloak>{
{msg}}</h1>
4.计算属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
姓:<input type="" name="" id="" value="" v-model="xing" />
<br>
名:<input type="" name="" id="" value="" v-model="ming" />
<br>
<!-- 全名:<input type="" name="" id="" value="" v-model="xing.concat(' ').concat(ming)"/> -->
姓名:<input type="" name="" id="" value="" v-model="fullname">
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el: '#box',
data: {
xing: '',
ming: ''
},
//我要用到一个数据，这个数据是根据其他属性的变化的得来的，我就可以使用计算属性来做
//计算属性
computed: {
//这个fullname函数，在第一次初始化的时候，会调用一次
//下来就是这个函数中用的属性一变化，这个函数调用
fullname: function() {
var x = this.xing;
var m = this.ming;
console.log("fullname函数调用了")
return x.concat(' ').concat(m);
}
}
})
</script>
运行结果如图：
5.通过属性侦听实现单位转换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
千米：<input type="text" v-model.number="num1" />
米：<input type="text" v-model.number="num2" />
</div>
</body>
</html>
<script type="text/jscript">
new Vue({
el: "#box",
data: {
num1: '',
num2: ''
},
watch: {
num1: function(value) {
this.num2 = value * 1000;
},
num2: function(value) {
this.num1 = value / 1000;
}
}
})
</script>
运行结果如图：
