vue学习-原创手记-慕课网

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>vue.js测试程序</title>
    <script src="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 src="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>