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>

　　

Vue学习笔记 template methods,filters,ChromeDriver,安装sass的更多相关文章

  1. Vue学习笔记：methods、computed、watch的区别

    自:https://www.jb51.net/article/120073.htm 首先要说,methods,watch和computed都是以函数为基础的,但各自却都不同 而从作用机制和性质上看,m ...

  2. vue学习笔记(十)路由

    前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...

  3. vue 学习笔记（二）

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  4. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  5. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  6. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  7. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  8. Vue学习笔记-Django REST framework3后端接口API学习

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

  9. Vue学习笔记-vue-element-admin 前端学习

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

随机推荐

  1. mysql 数据库查询

    myspl   三部分  文件  服务  界面 查看数据库命令   show databases 创建数据库  create database  库名 删除数据库   drop database   ...

  2. 淘宝IP地址库采集器c#

    个人原创.欢迎转载.转载请注明出处.http://www.cnblogs.com/zetee/articles/3482085.html 采集器概貌,如下: 最近做一个项目,功能类似于CNZZ站长统计 ...

  3. 深入理解java虚拟机（三）对象回收判断算法以及死亡过程

    在堆里面存放着Java几乎所有的对象实例,垃圾收集器要进行垃圾回收,要做的第一步便是找出那些对象是需要回收的. 怎么判断对象是否需要回收? 常用的方法有两种. 1.引用计数算法.为每一个对象添加一个引 ...

  4. 【小梅哥SOPC学习笔记】SOPC开发常见问题及解决办法集锦

    SOPC开发常见问题及解决办法集锦 一.Symbol 'NULL' could not be resolved 近期在评估使用NIOS II处理器进行项目的开发,我使用的软件是Quartus II 1 ...

  5. XJOI 3578 排列交换/AtCoder beginner contest 097D equal (并查集)

    题目描述: 你有一个1到N的排列P1,P2,P3...PN,还有M对数(x1,y1),(x2,y2),....,(xM,yM),现在你可以选取任意对数,每对数可以选取任意次,然后对选择的某对数(xi, ...

  6. alpha七天冲刺计划

    alpha七天冲刺计划(更新ing) 第一天:https://www.cnblogs.com/renluqian/p/9895895.html 第二天: 第三天: 第四天: 第五天: 第六天: 第七天 ...

  7. C++ 的写好库编译好，DELPHI或者Java做界面，iOS 和 Android 就都搞定。

    当然也可以使用BCB和相关的开发库来开发App,只是别人没法帮助你. 摘自<想到做到-Android开发关键技术与精彩案例>.(詹建飞) p40

  8. Linq转换操作之OfType,Cast,AsEnumerable,ToLookup源码分析

    Linq转换操作之OfType,Cast,AsEnumerable,ToLookup源码分析 一:Tolookup 1. 从方法的注解上可以看到,ToLookup也是一个k,v的形式,那么问题来了,它 ...

  9. scvmm2008 错误 2921 0x8007054F

    这个错误是由于bits智能传输服务依赖的https 443端口被占用.443端口一般常用于银行.购物网站,是一种加密的http,一般是通过ssl安全套接字来加密的,但是ssl漏洞可能被木马病毒利用. ...

  10. Django Query

    Making Qeries 一旦创建了数据模型,Django就会自动为您提供一个数据库抽象API,允许您创建.检索.更新和删除对象.本文档解释了如何使用这个API. The models 一个clas ...