<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue.js测试程序</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.min.js"></script>
</head>
<body>
<!--实现在body区域显示一个名称-->
<div id="app">
{{name}}<!--相当于MVVM的view视图-->
</div>
</body>
<script>
//编写MVVM中的model部分及VM（ViewModel）部分
var VM = new Vue({
el:'#app',//vm接管了app区域的管理
data:{//model数据
name:'vue测试'
}
});
</script>
</html>代码编写步骤：
1、定义html，引入vue.js
2、定义app div，此区域作为vue的接管区域
3、定义vue实例，接管app区域。
4、定义model（数据对象）
5、VM完成在app中展示数据
实现联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js常用指令的测试</title>
</head>
<body>
<!--实现在body区域显示一个传智播客名称-->
<div id="app">
<!--相当于MVVM的view视图-->
<!--{{name}}-->
<a v-bind:href="url">
<span v-text="name"></span>
</a>
<input type="text" v-model="num1"/> +
<input type="text" v-model="num2"/>=
<!-- <span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>-->
<span v-text="result"></span>
<!--{{Number.parseInt(num1)+Number.parseInt(num2)}}-->
<button v-on:click="change">计算</button>
<div v-bind:style="{ fontSize: size + 'px' }">javaEE培训</div>
</div>
</body>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.min.js"></script>
<script>
//编写MVVM中的model部分及VM（ViewModel）部分
var VM = new Vue({
el:'#app',//vm接管了app区域的管理
data:{//model数据
name:'黑马程序员',
num1:0,
num2:0,
result:0,
url:'http://www.itcast.cn',
size:11
},
methods:{
change:function () {
this.result = Number.parseInt(this.num1)+Number.parseInt(this.num2)
//alert("计算结果："+this.result)
}
}
});
</script>
</html>點擊查看更多內容
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦