初识vue.js,我的学习之路

Posted Angel爽

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初识vue.js,我的学习之路相关的知识,希望对你有一定的参考价值。

  vue之自定义指令

    像v-if、v-show、等这些都是系统指令,比如说我想写一个v-color的指令,但是系统是没有这个指令的,如果我们直接这样写肯定会报错,所以我们下面就需要自定义指令。

 1 <div id="app">
 2 
 3     <h1 v-color="pink">11111111111111</h1>
 4 
 5 </div>
 6 
 7 <script src="vue.js"></script>
 8 <script>
 9 
10     Vue.directive("color",function(el,binding){
11         /*console.log(el);
12         console.log(binding); */
13 
14         el.style[binding.name] = binding.expression;
15 
16     });
17     new Vue({
18         el:"#app",
19         data:{
20             pink:""
21         }
22 
23     })
24 </script>
25 </body>
上面这种Vue.directive是全局的写法,里面有两个参数第一个是指令名称,第二个是一个方法,方法里面也有两个参数第一个参数el就是Dom节点,第二个是这个对象里面有个name属性,name对应color就是这个color。
这是一个全局的写法。
下面这种是局部的写法(注意的是directive要加s):
 1 <div id="app">
 2 
 3     <h1 v-color>11111111111111</h1>
 4     <h2 v-date>456</h2>
 5 
 6 </div>
 7 
 8 <script src="vue.js"></script>
 9 <script>
10     new Vue({
11         el:"#app",
12         directives:{
13             "color":function(el,binding){
14                 el.style.color = "red"
15             },
16             "date":function(el,binding){
17 
18                 el.innerhtml = "123"
19             }
20         }
21     })

 





 





以上是关于初识vue.js,我的学习之路的主要内容,如果未能解决你的问题,请参考以下文章

VUE学习笔记:1.初识vue.js

Vue学习系列——初识Vue.js核心

Python学习之路——Python初识以及变量

Vue.js系列之一初识Vue

Vue.js 入门之路

python学习之路Day1:模块初识