在 b站上学习vue.js,https://www.bilibili.com/video/av13450835 Vue.js精讲 - 表严肃讲Vue 的视频总结。
可以在官网上下载vue.js https://vuejs.org/js/vue.js ,在html页面中引入即可(要将vue.js放在其他js引用之前才可以成功调用vue.js)。
vue.js的使用:
可以创建一个main.js,内容如下:
var app = new Vue({
el:"引用vue的元素",
data:{
数据对象: "数据";
}
});
实例:
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<div id="app">
<span>你的名字是:{{name}}</span>
</div>
</body>
<script type="text/javascript" src="js/vue.js"/>
<script type="text/javascript" src="js/main.js"/>
</html>
main.js的内容:
var app = new Vue({
el:"#app",
data:{
name:"二狗"
}
});
结果如下:
同时也可以通过开发者工具的console来手动输入数据:
输入数据后回车显示:
除此之外,还有可以使用input来动态输入数据:
在span 标签外加上input标签:
<input type="text" v-model="name"/> v-model是一个指令是一个自定义的属性,可以对表单控件或者组件上创建双向绑定 。
然而,我们还要考虑在数据为空的情况下,不显示该条数据,则可以通过v-show 或v-if指令来控制数据的显示和隐藏:
<span v-show="{{name}}" >你的名字是:{{name}}</span> 或
<span v-if="{{name}}">你的名字是:{{name}}</span>
v-show:当数据为空时,数据元素隐藏,有则显示;v-if:当数据为空时,数据元素被删除,有则重建。