Vue学习第一天
第一步明确了MVC和MVVM的项目结构的特点，MVC是模型，控制器，视图三者的统一，同时也是我们经常用的结构，而MVVM，也是三个部分的结合体M, V, VM,其中V仍旧为视图，不过在此处，更加明确的指出了是HTML，M指的是我们所要渲染到V中的数据，VM指的是我们在数据和页面之间的管理者
下面介绍使用VUE的步骤：
- 在HTML中引用vue.js
- 编写vue实例，控制页面结构
就这两步，就是今天学习的内容，不过展开讲内容还是挺多的，首先，对于一个vue实例主要有以下几个部分
<!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="text1">
<h2>{{msg}}</h2>
<h2 v-text="msg"></h2>
<div v-html="msg1"></div>
<h2 v-bind:style="mycolor">{{msg}}</h2>
<input v-model="msg" />
<button v-on:click="show6">按钮</button>
</div>
<script>
var vue = new Vue({
el:'#text1', //el是element的简称，用来指定，当前vue实例控制的区域
data:{ //data里面包含需要用到的数据
msg:"我的一个道姑朋友",
msg1:"<h2>我的一个道姑朋友</h2>",
mycolor:"color: blue;"
},
methods:{ //这里定义用到的方法，可以直接调用
show6:function(){
alert("我的一个道姑朋友");
}
}
})
</script>
</body>
</html>
首先，示例中的el对应着当前VUE实例控制的范围，多使用选择器指定，接下来的data则是对应需要渲染到页面的数据，下面还有可能会有methods(这个没写出来，后面会有例子)，表示页面中会用到的各种方法。
下面介绍应用于页面的几个常用标签
-
{{text}}插值表达式
-
v-text
-
v-html
第一种和第二种都是像页面渲染数据用的（插值表达式更灵活），而他们的数据来源于data， 第三个则是可以向页面渲染html代码段
下面再介绍几个常用标签 -
v-bind:用于给页面元素绑定属性
-
v-on：用于给页面元素绑定方法
值得一提的是，v-on指定的方法，就写在vue实例中的methods中，在这个方法中，我们可以调用实例中data模块中的数据，但是要依赖于this变量，具体的演示如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跑马灯</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="test1">
<button v-on:click="lang">浪起来</button>
<button v-on:click="wen">稳住</button>
<h3>{{msg}}</h3>
</div>
<script>
var vue = new Vue({
el:'#test1',
data:{
msg:"猥琐发育，别浪",
clockid:null
},
methods:{
lang(){
if(this.clockid!=null){
return ;
}
//在vue实例内部，如果需要调用自身的data和method需要使用this关键字
//使用函数以后this就指向上一个function，也就无法访问msg,所以使用箭头函数
this.clockid = setInterval(()=>{
var head = this.msg.substring(0, 1);
var tile = this.msg.substring(1);
this.msg = tile + head;
}, 400)
},
wen(){
if(this.clockid!=null){
clearInterval(this.clockid);
this.clockid = null;
this.msg = "猥琐发育，别浪";
}
}
}
})
</script>
</body>
</html>
值得一提的是，如果函数中在套用函数，由于作用域的问题，我们不能直接用this，而是需要使用()=>即箭头函数，解决此问题
接下来介绍三个分支循环标签
- v-if 如果条件成立，创建标签，否则销毁标签
- v-show 如果条件成立，显示标签，否则隐藏标签
- v-for 进行循环操作
下面是演示代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>判断页面</title>
<script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="test4">
<h2 v-if="flag">我的一个道姑朋友</h2>
<h2 v-show="flag">我的一个道姑朋友</h2>
<button v-on:click="push">切换状态</button>
</div>
<script>
//v-if每次都会删除重建元素
//v-show只是隐藏显示元素
var vue = new Vue({
el:'#test4',
data:{
flag:true
},
methods:{
push:function(){
this.flag = !this.flag;
}
}
})
</script>
</body>
</html>
前两个标签都可进行标签的隐藏和显示，不过远离不太相同
