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>
运行结果如图: