为了账号安全,请及时绑定邮箱和手机立即绑定

vue学习

标签:
Vue.js
<!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>




点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消