Vue.js 应用都需要通过实例化 Vue 来实现。如下:

 
var vm = new Vue({
  // 选项
})

Vue.js 最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统。重要的核心:

  • Vue.js响应式的数据绑定系统
  • Vue.js组件系统

Vue.js的实例化

vue.js的构造器在上面已经了解了,那么,看一下下面这个简单地例子来了解下vue.js的构造器需要哪些内容:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例 - Break易站(breakyizhan.com)</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
	<div id="vue_det">
		<h1>site : {{site}}</h1>
		<h1>url : {{url}}</h1>
		<h1>{{details()}}</h1>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#vue_det',
			data: {
				site: "Break易站",
				url: "www.breakyizhan.com",
				alexa: "10000"
			},
			methods: {
				details: function() {
					return  this.site + " - 程序员的B站!";
				}
			}
		})
	</script>
</body>
</html>

尝试一下 >>

上面的例子,如果属性变化了,Vue 的响应式系统也能让html变化,如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例 - Break易站(breakyizhan.com)</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="vue_det">
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>Alexa : {{alexa}}</h1>
    </div>
    <script type="text/javascript">
    // 我们的数据对象
    var data = { site: "Break易站", url: "www.breakyizhan.com", alexa: 10000}
    var vm = new Vue({
        el: '#vue_det',
        data: data
    })
    // 它们引用相同的对象!
    document.write(vm.site === data.site) // true
	document.write("<br>")
    // 设置属性也会影响到原始数据
    vm.site = "breakyizhan"
    document.write(data.site + "<br>") // Breakyizhan

    // ……反之亦然
    data.alexa = 6789
    document.write(vm.alexa) // 1234
    </script>
</body>
</html>

尝试一下 >>

除了上面的数据属性,Vue.js的实例属性与方法如下:

 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例 - Break易站(breakyizhan.com)</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
	<div id="vue_det">
		<h1>site : {{site}}</h1>
		<h1>url : {{url}}</h1>
		<h1>Alexa : {{alexa}}</h1>
	</div>
	<script type="text/javascript">
	// 我们的数据对象
	var data = { site: "Break易站", url: "www.breakyizhan.com", alexa: 10000}
	var vm = new Vue({
		el: '#vue_det',
		data: data
	})

	document.write(vm.$data === data) // true
	document.write("<br>") // true
	document.write(vm.$el === document.getElementById('vue_det')) // true
	</script>
</body>
</html>

尝试一下 >>

Vue.js响应的数据绑定

Vue.js 的起步和概览

响应式的数据绑定:数据发生改变->视图自动更新;忘记操作DOM这回事,专注于操作数据。可以看一下的简单Vue.js响应解析,更多的后面会详细来说:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例 - Break易站(breakyizhan.com)</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
	<!--不操作dom,操作数据。要做的就是把数据放到页面中去展示。两件事:1.数据;2.html模板-->
	<div id="vue_det">
		<h1>site : {{site}}</h1><!--解析到message,渲染出要的值-->
		<h1>url : {{url}}</h1><!--解析到message,渲染出要的值-->
		<h1>{{details()}}</h1><!--解析到message,渲染出要的值-->
	</div>
	<script type="text/javascript">
		//根实例 启动应用。 传入一个对象作为参数,称之为选项对象,告诉vue要做什么事
		var vm = new Vue({
			el: '#vue_det',//element 可以写css选择器 node, 这个为选中的模板
			data: {//数据对象上的属性都会放到这个vue实例上
				site: "Break易站",//变量名和要传入的变量名一样的话,可以直接简写
				url: "www.breakyizhan.com",//变量名和要传入的变量名一样的话,可以直接简写
				alexa: "10000"//变量名和要传入的变量名一样的话,可以直接简写
			},
			methods: {
				details: function() {
					return  this.site + " - 程序员的B站!";
				}
			}
		})
		//app这个html结构由这个vue管理
	</script>
</body>
</html>

尝试一下 >>

Vue.js的组件系统

组件系统是 Vue.js 另一个重要概念,因为它提供了一种抽象,让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点,几乎任意类型的应用的界面都可以抽象为一个组件树:

Vue.js 的起步和概览

我们在Vue.js 的目录结构中有说到src/app.vue的目录结构了,下面看个例子简单解析一下这个组件功能:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - Break易站(breakyizhan.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	<breakyizhan></breakyizhan>
</div>

<script>
// 注册
Vue.component('breakyizhan', {
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>
</body>
</html>

尝试一下 >>

 
转载请保留页面地址:https://www.breakyizhan.com/vue/6679.html
扫描二维码添加微信 
  • ,每次淘宝领取淘宝优惠券,淘宝购物更优惠。现在添加微信,还可以领取机械键盘50元优惠券!添加微信后回复机械键盘即可领取!
    支持我们,就用微信淘宝!