Vue学习笔记

1、 属性和方法

    var vm = new Vue({
                el:"#app",
                data:{
                 num:10
                } ,    
                methods:{  //方法
                  getAllNum(){
                      this.num++; 
                  }
                },
                computed:{  //属性 （第一次加载会放在内存中）
                    getNumPlus(){
                        return this.num++;
                    }
                }
            });

 2、自定义指令

<div id="app">
            <p v-ace>{{num|price}}</p>
        </div>
        
        <script type="text/javascript">
            //自定义指令，可以有方法，所有指令都要以  v- 开头
            Vue.directive("ace",{
                //el指元素"ace"，binding 这个对象包含了指令的很多信息
                bind(el,binding){
                    //el.innerHTML = "<b>ACE</b>";
                    var price = parseInt(el.innerText).toFixed(2);
                    el.innerText = price;
                },
　　　　　　　　　　//被绑定的元素插入父节点时调用
                inserted(){
　　　　　　　　　　}
            });
            
            var vm = new Vue({
                el:"#app",
                data:{
                 num:10
                },
　　　　　　　　　　filters:{
　　　　　　　　　　　　price(values){
　　　　　　　　　　　　　　return parseInt(values).toFixed(2);
　　　　　　　　　　　　}
　　　　　　　　　　} 
            });
        </script>

运行结果：10.00

3、全局组件 

    <div id="app">
            //1、如想要大写这里要加下划线
            <!--<my-header></my-header>-->
            //2、都小写的正常调用
            <myheader></myheader>
            
        </div> 
        <script>
            //全局组件
            //1、myHeader 大写方式  
            //Vue.component("myHeader",{
            //2、都小写    
            Vue.component("myheader",{
                template:"<h1>This is Header</h1>"
                })
            var vm = new Vue({
                el:"#app",
                data:{
                 
                } 
            });    
        </script>

 4、局部组件

        <div id="app">
         
            //局部组件
            <hello></hello>
            <world></world>
        </div>
        
        
        <script>
         
            var vm = new Vue({
                el:"#app",
                data:{
                 
                } ,
                //局部组件
                components:{
                    "Hello":{
                        template:"<b>Hello everyOne</b>"
                    },
                    "world":{
                        template:"<b>world everyOne</b>"
                    }
                }
            });    
        </script>

5、模板组件

如果说组件的template内容结构比较简单，可以直接写在template选项中；但是当自定义组件的template内容比较复杂的时候，直接写就不合适了，也容易出错，所以：

对于这种状况Vue给出了自己的解决方案：使用模板，使用Vue的内置template模板来包裹着模板内容

 <template id="foreignerName">
        <!-- <template/>标签内部被包裹着的内容必须有且只有一个根元素，在这里的根元素是ul -->
        <ul>
            <li v-for="item in nameArr">{{item}}</li>
        </ul>
    </template>

 

 这个模板要写在Vue实例的外面，这里template的id属性的值是自定义的，配合js部分用来标识模板内容；但是有一点值得注意，那就是被template包裹着的内容有且只有一个根元素，在这里是ul元素

JS部分

 Vue.component("my-haha",{//如果template模板内容比较复杂，那么就可以这样做
            template:"#foreignerName",//对应于template中的id属性
            data:function(){
                return {
                    nameArr:["Alice","Marry","Athena"]
                }
            }
        })

 

HTML部分

 <div id="container" v-cloak>
        <h3>{{name}}</h3>
        <!-- 当自定义组件的template模板内容比较复杂的时候 -->
        <my-haha></my-haha>
    </div>

 

    <script>
            //调用模板
             Vue.component("my-haha",{
                 template:"#foreignerName"
             });
    </script>

 ---------------------------------------------------------------------------------------------------

HTML

  //调用模板
        <div id="app">
            <mytemp></mytemp> 
        </div> 
         //自定义模板
        <template id="temp">
            <div>
                this is Temp  {{msg}}
            </div>
        </template>

 

   <script>
            //调用模板
             Vue.component("mytemp",{
                 template:"#temp",
                 data(){
                      return {msg:"Hello world"}
                 }
             });
             var vm = new Vue({
                el:"#app",
                data:{
                   msg:"Hello world" 
                } 
           });
    </script>

 

script模板方法

    //调用模板
        <div id="app">
            <mytemp></mytemp> 
        </div>

        
         //自定义模板
        <script id="scr" type="text/template">
         <h1>
             this is script {{msg}}
         </h1> 
        </script>
        
        <script>
            //调用模板
             Vue.component("mytemp",{
                 template:document.getElementById("scr"),
                 data(){
                      return {msg:"Hello world"}
                 }
             });
         
            var vm = new Vue({
                el:"#app",
                data:{
                   msg:"Hello world" 
                }
                    });
          </script>