小小千想和您聊一聊

当前位置: 首页> 技术分享> 菜鸟Vue学习笔记(一)

菜鸟Vue学习笔记(一)

  我今年刚参加工作,作为一个后台Java开发人员,公司让我开发前端,并且使用Vue框架,我边学习边记录。

  Vue框架是JS的封装框架,使用了MVVM模式,即model—view—viewmodel模式, 简而言之,就是数据与视图的绑定。

  我准备开始学习一些最基础的Vue使用,以此入门。

  首先在网上下载了vue.min.js的文件。

  我选择了v-html这个标记作为入门,它的作用是能够将变量中字符串类型的html文本以html标记的形式显示在页面上。例如:


<div id="div1">
<div v-html="h"></div>
</div>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
var v = new Vue({
el: "#div1", // vue的有效范围,不能直接使用body
data: { // 页面需要的vue数据
h: "<h1>Hello ,world</h1>"
}
});
</script>


  哇,不错,页面终于出现了Hello, world,不错,接下来看看其他的简单的标签。

  v-if 和v-show ,表示是否显示页面内容。

  当if或者show中变量的值为true时,当前控件显示,false则不显示


<div id="div1">
<img v-show="checked" src="img/3.jpg" width="200" /><br />
</div>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
var v = new Vue({
el: "#div1", // vue的有效范围,不能直接使用body
data: { // 页面需要的vue数据
checked: false
}
});
</script>


  然后,把v-show换成v-if,原来一样的。

  接下来看看v-for标签吧,看起来作用应该是循环。


<div id="div1">
<ul>
<li v-for="(f, index) in arr">{{index}} {{f}}</li>
<li v-for="n in 10">{{n}}</li>
<li v-for="(v,k,index) in obj">{{index}}=={{k}}:{{v}}</li>
</ul>
</div>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
var v = new Vue({
el: "#div1", // vue的有效范围,不能直接使用body
data: { // 页面需要的vue数据
arr: ["苹果", "香蕉", "梨子", "橘子"],
obj: {"name":"mary", "age":20, "sex":"女"}
}
});
</script>


  原来,在vue中的循环居然可以这样用,嗯,今天就到这里,下次再继续吧。

上一篇:HTML5工具初识之网页编辑器

下一篇:菜鸟Vue学习笔记(二)

QQ技术交流群

千锋HTML5官方①群
791201477

加入群聊