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>