正文
学习vue.js 第一天
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
最近听到很多人都在用Vue.js ,我也想凑凑热闹，来个入门 啥的 ，要不以后人家说，啥都不知道，多low
看到官网 是这样介绍Vue.js
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层。
在我第一天的学习后，我觉得它和angular.js 有点像，至于到底是不是这样 还需要深入学习。
我的理解 这个框架 让我在前端数据显示方面很简单 ，不用再写一堆js “+=” 什么的 ，这只是我目前浅层的理解 ，更深的以后会学习再说。
下面是我今天学习的代码，里面有很多注释 是我自己的理解，希望对有需要的人有帮助，不需要的人，自动略过，谢谢。
（一）
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>vue01</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<!--
声明式渲染 将数据渲染进DOM系统 有一个特点 元素是响应式的 在浏览器控制台里改变 app.message
的值 相应页面上的值也会改变
-->
<div id="app">
{{message}} <!-- 数据 -->
</div>
<script>
var app = new Vue({
el:"#app",//这个应该就是包含data数据的元素的class或者id，我是这么理解的
data:{
message:"Hello Vue!" // 渲染在页面上的数据
}
})
</script>
</body>
</html>
（二）
<body>
<!--条件判断指令-->
<div id ="app">
<p v-if="seen">我在呢</p>
<p v-if="noseen">我在呢</p>
</div>
<!-- 条件循环指令 在控制台里输入 app1.items.push({text:"第四条"}) 页面会多加一条-->
<div id="app1">
<ol>
<li v-for="item in items">
{{item.text}}
</li>
</ol>
</div>
<script>
var app = new Vue({
el:"#app",//这个应该就是包含data数据的元素的class或者id，我是这么理解的
data:{
seen:true, // 渲染在页面上的数据
noseen:false
}
})
var app1 = new Vue({
el:"#app1",//这个应该就是包含data数据的元素的class或者id，我是这么理解的
data:{
items:[
{text:"第一条"},
{text:"第二条"},
{text:"第三条"}
]
}
})
</script>
</body>
（三）
<body>
<!--绑定事件 单击事件v-on:click-->
<div id ="app">
<p v-on:mouseenter="change">{{message}}</p>
<button v-on:click="reverse">reverse</button>
</div><script>
var app = new Vue({
el:"#app",//这个应该就是包含data数据的元素的class或者id，我是这么理解的
data:{
message:'Hello Vue.js!'
},
methods:{ //方法
reverse:function(){
this.message = this.message.split("").reverse().join("")
},
change:function(){
this.message = "你好吗？";
}
}
})</script>
</body>
（四）
<body>
<!--双向数据绑定 用v-model 连接数据-->
<div id ="app">
<p>{{message}}</p>
<input v-model="message">
</div><script>
var app = new Vue({
el:"#app",//这个应该就是包含data数据的元素的class或者id，我是这么理解的
data:{
message:'Hello Vue.js!'
}, })</script></body>
