• Tags
  •         
  • www.breakyizhan.com
  •    

    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