Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)基础指令实例讲解(各种数据绑定、表单渲染大总结)
Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习,非常容易与
其它库或已有项目整合。在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。他是基于AnjularJs 编
写的,所以和前者的语法特别相似,却又使用简洁了很多。
那今天,我就给大家详细的说道说道这个 Vue.js ,以下是我们这次详解的目录,朋友们可以根据自己的情况选择性阅读,所
有操作均附有代码实现。
1. Vue.js 如何绑定到页面中,使用他的功能。
2. Vue 实例化对象的生命周期。
3. Vue 的 所有 数据绑定指令
那接下来,我们就开始今天的介绍啦!
1. Vue.js 如何绑定到页面中,使用他的功能。如何绑定到页面中,使用他的功能。
先看下面的一段代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="app1" onclick="app1.func()">我是app1,点我</button>
</body>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
//通过Vue.js的构造函数 实例化出一个根实例
var app1= new Vue({
el:"#app1",
data:{
message:"我在app1中显示出来了吗?",
func:function(){
alert(this.message);
}
}
});
console.log(app1.$data.message);
//这个要知道哈,app1就是一个变量,一个对象类型的变量,链式语法直接用即可
</script>
</html>
效果如下:
上述代码就是点击按钮有弹窗,下面解析一下这段代码。
var app1= new Vue({
el:"#app1",
data:{
message:"我在app1中显示出来了吗?",
func:function(){
alert(this.message);
}
}
});
console.log(app1.$data.message);