• Vue学习笔记 template methods,filters,ChromeDriver,安装sass


    ChromeDriver installation failed Error with http(s) request: Error: connect ETIMEDOUT 172.217.160.80

    ChromeDriver  被墙了 

    方法一: npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

    方法二: cnpm install chromedriver

    方法三: npm install cross-env --save-dev

    Vue支持sass

    安装node-sass 安装sass-loader 安装style-loader 有些人安装的是 vue-style-loader 其实是一样的
    cnpm install node-sass --save-dev 
    cnpm install sass-loader --save-dev 
    cnpm install style-loader --save-dev
    

      

    1.页面上有容器

    <div id="app">
    		
    </div> 

    2.初始化 template模板一定要有最外层根节点div 不然会报错

    new Vue({
            el: "#app",
            template:'<div>{{name}}</div>',
            data: function(){
                return {
                     name: "张三"
                }
            }
    })                 

    3.  template,filters,methods 完整示例

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<title>练习</title>
    	<script src="vue.js"></script>
    </head>
    <body>
    	<div id="app">
    		
    	</div>
    </body>
    </html>
    
    <script type="text/javascript">
    	Vue.component("submit-button",{
    		template: `
    			<input type="button" name="" value="我是公共按钮" />
    		`
    	});
    
    	Vue.filter("globalReverse",function(dataStr,arg1){
            return arg1 + ':' + dataStr.split('').reverse().join('');
    	});
    
        var myHeader = ("myHeader",{
        	template: `
        		<div>
        			{{title}}, 我是头部;<submit-button/>
        		</div>
    
        	`,
        	props: ["title"]
        });
    
        var myBody = ("myBody",{
        	template: `
        		<div>
        			<button v-on:click="alertMsg('aa')">点我弹出消息</button>
        			<submit-button/>
        		</div>
        	`,
            methods:{
            	alertMsg: function(arg1) {
            		alert(arg1);
            	}
            }
        })
    
    
    	new Vue({
            el: "#app",
            components:{
            	"myHeader": myHeader,
            	"myBody": myBody
            },
            template: `
             <div>
               <myHeader v-bind:title="headerTitle" />
               		
               <myBody>
               </myBody>
               <p>{{headerTitle}}</p>
               <p>{{headerTitle | reverserStr}}</p>
               <p>{{headerTitle | reverserStrWithParams("a1","b2")}}</p>
               <p>{{headerTitle | globalReverse("language")}}</p>
               <input type="text" name="" v-model="headerTitle">
             </div>
            `,
            data: function() {
            	return {
            		headerTitle: "Hello World"
            	}
            },
            filters: {
            	reverserStr: function(dataStr) {
            		return dataStr.split('').reverse().join('');
            	},
            	reverserStrWithParams: function(dataStr,arg1,arg2) {
            		return dataStr.split('').reverse().join('') + ';arg1='+arg1+";arg2="+arg2;
            	}
            }
    	})
    </script>
    

      

        

  • 相关阅读:
    转载:AAC编解码概述
    转载:ADTS header
    wcf寄宿在iis上的跨域访问问题【不止是添加跨域文件】
    转 http 分析工具
    时间管理1
    关于silverlight和Wcf分布式部署注意问题(收藏夹)
    c#修改xml文件
    关于在线编辑的异常
    创业文摘5--从程序员转向企业家的10个建议
    silverlight 后台代码生成gridview
  • 原文地址:https://www.cnblogs.com/tonnytong/p/10313413.html
Copyright © 2020-2023  润新知