【免费】学习周报内容，关于vue部分的学习资源-CSDN文库

共20个文件

html：16个

vue：3个

js：1个

vue.js

需积分: 0 15 浏览量 2024-04-30 19:43:53 上传评论收藏 15KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

vue1.zip （20个子文件）

1.自定义指令.html 4KB

1.基本使用.html 3KB

2.分析生命周期.html 3KB

App.vue 279B

2.几个基本的注意点.html 1KB

2.回顾dom操作.html 1KB

3.组件的嵌套.html 2KB

5.v-pre指令.html 673B

main.js 146B

1.v-text指令.html 680B

School.vue 626B

2.v-html指令.html 949B

index.html 477B

5.一个重要的内置关系.html 2KB

1.引出生命周期.html 2KB

Student.vue 516B

3.总结生命周期.html 2KB

3.v-cloak指令.html 609B

4.VueComponent.html 2KB

4.v-once指令.html 684B

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>自定义指令</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>当前的n值是：<span v-text="n"></span></h2>  <h2>放大10倍后的n值是: <span v-big="n"></span></h2> <button @click="n++">点我n+1</button> <p>测试指令函数所调用的时机: {{ name }} </p> <hr/> <input type="text" v-fbind:value="n"/> </div> <div id="root2"> <input type="text" v-fbind:value="x"/> </div> <script type="text/javascript"> Vue.config.productionTip = false; //此时自定义fbind指令使全局指令了，其他vue实例所管理的容器也可以使用 //全局指令 Vue.directive('fbind', { bind(el, binding){ // console.log('bind') el.value = binding.value; }, //指令被插入页面时 inserted(el, binding){ // console.log('inserted') el.focus(); }, //指令所在模版被重新解析时 update(el, binding){ // console.log('update'); el.value = binding.value; } }) const vm = new Vue({ el:"#root", data:{ name: '上海', n:1 }, //定义指令的配置项: directives directives:{ /** big函数的调用时机: 1.指令与元素成功绑定(但注意此时dom元素还没有成功的被弄到页面上去)时会被调用 (首次,类似于dom元素一加载) 2.指令所在的模版被重新解析时会被再次调用 **/ //两种写法:1.对象(key-value) 2.函数 // 'big-number'(el,binding){ // console.log('big被调用啦！') // //收到两个参数，第一个参数代表真实dom元素，第二个参数是绑定对象，关注该绑定对象中的value属性 // // console.log(el,binding); // //原生dom的操作 // el.innerText = binding.value * 10; // }, big(el,binding){ console.log(this); //注意此处this===window vue实例对象此时'不管'你写在指令里面的函数了 console.log('big被调用啦！') //收到两个参数，第一个参数代表真实dom元素，第二个参数是绑定对象，关注该绑定对象中的value属性 // console.log(el,binding); //原生dom的操作 el.innerText = binding.value * 10; }, //自定义fbind绑定 //换成对象写法对比函数简写方式其实只是多了 inserted钩子 // fbind:{ // //指令与元素成功绑定 // // bind(el, binding){ // // // console.log('bind') // // el.value = binding.value; // // }, // // //指令被插入页面时 // // inserted(el, binding){ // // // console.log('inserted') // // el.focus(); // // }, // // //指令所在模版被重新解析时 // // update(el, binding){ // // // console.log('update'); // // el.value = binding.value; // // } // } } }); const vm2 = new Vue({ el:'#root2', data:{ x: 1, } }) </script> </body> </html>

评论收藏

内容反馈