Vue學習筆記 template methods,filters,ChromeDriver,安裝sass

時間 2019-11-19

標籤 vue 學習筆記 template methods filters chromedriver 安裝 sass 简体版

原文原文鏈接

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

ChromeDriver 被牆了 javascript

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

方法二： cnpm install chromedrivervue

方法三： npm install cross-env --save-dev java

Vue支持sassnode

安裝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.頁面上有容器chrome

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

2.初始化 template模板必定要有最外層根節點div 否則會報錯
npm

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

3. template,filters,methods 完整示例sass

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。