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>