vue学习（二）—vue.js2.0全局API学习

时间：2022-08-16 05:10:24
  • Vue.directive自定义指令
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue.directive自定义指令</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <h1>Vue.directive自定义指令</h1> <hr /> <div class="app"> <!-- 自定义指令v-huang --> <div v-huang='color'>{{num}}</div> <p><button @click="add">ADD</button></p> </div> <p> <button onclick="unbind()">解绑</button> </p> <script type="text/javascript"> // Vue.directive('huang',function(el,binding){ // console.log(el); // console.log(binding); // el.style='color:'+binding.value; // }) /** * 解绑 */ function unbind(){ app.$destroy(); } Vue.directive('huang', { bind: function(el,binding) { //被绑定 console.log('1 - bind'); el.style='color:'+binding.value; }, inserted: function() { //绑定到节点 console.log('2 - inserted'); }, update: function() { //组件更新 console.log('3 - update'); }, componentUpdated: function() { //组件更新完成 console.log('4 - componentUpdated'); }, unbind: function() { //解绑 console.log('5 - unbind'); } }) var app = new Vue({ el: '.app', data: { num: '0', color: 'red' }, methods: { add: function() { this.num++; } } }) </script> </body> </html>
  • Vue.extend扩展实例构造器
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Vue.extend扩展实例构造器</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script type="text/javascript" src="../js/vue.js"></script>

    </head>

    <body>
        <h1>Vue.extend扩展实例构造器</h1>
        <hr />
        <author></author>
        <div class="author"></div>

        <script type="text/javascript"> var authorUrl = Vue.extend({ template:'<p> <a :href="authorUrl">{{authorName}}</a> </p>', data:function(){ return{ authorName:'huangxiaoguo', authorUrl:'https://blog.csdn.net/huangxiaoguo1' } } }); new authorUrl().$mount('author'); new authorUrl().$mount('.author'); </script>
    </body>

</html>
  • Vue.set全局操作
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue.set全局操作</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <h1>Vue.set全局操作</h1> <hr /> <div class="app"> {{message.count}} <ul> <li v-for="item in message.arr">{{item}}</li> </ul> </div> <p><button onclick="add()">add</button></p> <!-- 由于Javascript的限制，Vue不能自动检测以下变动的数组。 *当你利用索引直接设置一个项时，vue不会为我们自动更新。 *当你修改数组的长度时，vue不会为我们自动更新。 * * 这时我们的界面是不会自动跟新数组的， * 我们需要用Vue.set(app.message.arr,1,'dd')来设置改变， * vue才会给我们自动更新， * 这就是Vue.set存在的意义。 --> <script type="text/javascript"> function add() { //Vue.set(outData,'count',2); //app.message.count++; //outData.count++; /** * vue可能监听不到（当没有其他的dom发生变化，改变数组下标的时候） */ //app.message.arr[1]='ddd'; Vue.set(app.message.arr, 1, 'dd'); } var outData = { count: 1, goods: 'car', arr: ['aaa', 'bbb', 'ccc'] } var app = new Vue({ el: '.app', data: { message: outData } }) </script> </body> </html>
  • 生命周期
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>生命周期</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <h1>生命周期</h1> <hr /> <div class="app"> {{count}} <p><button @click="add">ADD</button></p> </div> <script type="text/javascript"> var app = new Vue({ el: '.app', data: { count: 1 }, methods: { add: function() { this.count++; } }, beforeCreate: function() { console.log('1-beforeCreate 初始化之前'); }, created: function() { console.log('2-created 创建完成'); }, beforeMount: function() { console.log('3-beforeMount 挂载之前'); }, mounted: function() { console.log('4-mounted 被挂载之后'); }, beforeUpdate: function() { console.log('5-beforeUpdate 数据更新前'); }, updated: function() { console.log('6-updated 被更新后'); }, activated: function() { console.log('7-activated'); }, deactivated: function() { console.log('8-deactivated'); }, beforeDestroy: function() { console.log('9-beforeDestroy 销毁之前'); }, destroyed: function() { console.log('10-destroyed 销毁之后') } }) </script> </body> </html>
  • Template 制作模版
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Template 制作模版</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <h1>Template 制作模版</h1> <hr /> <div class="app"> <!-- 这个模块是放模板的，当有模板的时候， 里面所有的内容都会被替换掉 --> {{message}} </div> <div> <!-- 这种模板，是在本页面内单独使用的模板 --> <template id='dd2'> <h2 style='color:red'>我是Template标签模板</h2> </template> </div> <!-- 这种模板可以外部引用，重复高，使得页面整洁 --> <script type="x-template" id="dd3"> <h2 style='color:red'>我是script标签模板</h2> </script> <script type="text/javascript"> var app = new Vue({ el: '.app', data: { message: 'hello world!' }, /** * 这种模板比较死，适合少内容的写法 */ //template:` //<h2 style='color:red'>我是选项模板</h2> //` template: "#dd3" }) </script> </body> </html>
  • component组件
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>component组件-1</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script type="text/javascript" src="../js/vue.js" ></script>

    </head>
    <body>
        <h1>component组件-1</h1>
        <hr />
        <div class="app">
            <huang></huang>
            <panda here='china' from-here='sichuan'></panda>
            <!-- 使用data中的值 -->
            <panda v-bind:here='message'></panda>
            <!-- 简写 -->
            <panda :here='message'></panda>
        </div>
        <div class="ppa">
            <huang></huang>
        </div>
        <script type="text/javascript"> Vue.component('huang',{ template:`<div style='color:red'>我是全局的huang组件</div>`, }) var app=new Vue({ el:'.app', data:{ message:'China' }, components:{ "panda":{ template:`<div style='color:green'>我是局部的panda组件,自定义属性值是{{here}}-{{fromHere}}</div>`, props:['here','fromHere'] } } }) var ppa=new Vue({ el:'.ppa' }) </script>
    </body>
</html>
  • component组件-2(父子组件的关系)
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>component组件-2(父子组件的关系)</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script type="text/javascript" src="../js/vue.js"></script>

    </head>

    <body>
        <h1>component组件-2(父子组件的关系)</h1>
        <hr />
        <div class="app">
            <panda></panda>
        </div>

        <script type="text/javascript"> var city = { template: `<div style='color:green'>sichuan of China!</div>` } var panda = { template: ` <div> <p style='color:red'>panda from China!</p> <city></city> </div> `, components: { "city": city } } var app = new Vue({ el: '.app', components: { "panda": panda } }) </script>
    </body>

</html>
  • component组件-3(动态添加组件)
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>component组件-3(动态添加组件)</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script type="text/javascript" src="../js/vue.js"></script>

    </head>

    <body>
        <h1>component组件-3(动态添加组件)</h1>
        <hr />
        <div class="app">
            <component :is='who'></component>
            <button @click="changeComponent">changeComponent</button>
        </div>

        <script type="text/javascript"> var componentA = { template: `<div style='color:red'>I'm componentA </div>` } var componentB = { template: `<div style='color:green'>I'm componentB </div>` } var componentC = { template: `<div style='color:pink'>I'm componentC </div>` } var app = new Vue({ el: '.app', data: { who: 'componentA' }, components: { "componentA": componentA, "componentB": componentB, "componentC": componentC }, methods: { changeComponent: function() { if(this.who=='componentA'){ this.who='componentB'; }else if(this.who=='componentB'){ this.who='componentC' }else{ this.who='componentA' } } } }) </script>
    </body>

</html>
标签：

相关文章