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. Debian/Linux系统安全配置教程

    禁止root SSH登陆 配置SSH Key 配置iptables 当我们安装完Linux系统作为服务器后,总有一系列的安全配置需要进行.特别是当你的服务器Ip是对外网开放的话.全世界有很多不怀好意的 ...

  2. Oracle RMAN-06023 和ORA-19693错误

    在将一个0级备份的数据库还原到其它机器上时,首先遇到了RMAN-06023然后遇到ORA-19693错误,错误发生的环境和内容大致如下: 数据库版本: SQL> select * from v$ ...

  3. Spring思维导图(AOP篇)

    什么是aop AOP(Aspect-OrientedProgramming,面向方面编程),可以说是OOP(Object-Oriented Programing,面向对象编程)的补充和完善.OOP允许 ...

  4. Webstorm 10.0.4 配置

    1. 更换为sublime text的keymaps: https://github.com/ekaragodin/idea-sublime-keymap  (idea-sublime-keymap- ...

  5. bash 环境配置及脚本

    bash是 Bourne Again Shell简称 ,从unix系统的sh发展而来 查看当前shellecho $SHELL查看系统支持的shellcat /etc/shells cd /binls ...

  6. 一句话说说java设计模式

    设计模式 看到标题,大家是不是觉得不可思议,java的23种设计模式那么‘复杂’,那么‘难懂’,用一句话怎么说的明白呢? 首先,各位看官不要误解,近来在回头看设计模式,之前都看过,但时间是把‘杀猪刀’ ...

  7. PreparedStatementSQLException

    目录 文章背景 目录 问题分析 问题解决 说明 参考文章 版本记录 layout: default title: PreparedStatementSQLException category: [Te ...

  8. Redis缓存相关

    Redis缓存服务搭建及实现数据读写 RedisHelper帮助类 /// <summary> /// Redis 帮助类文件 /// </summary> public cl ...

  9. HBASE的优化、hadoop通用优化,Linux优化,zookeeper优化,基础优化

    HBase 的优化3.1.高可用在 HBase 中 Hmaster 负责监控 RegionServer 的生命周期,均衡 RegionServer 的负载,如果Hmaster 挂掉了,那么整个 HBa ...

  10. 哇,两门学考都是A(〃'▽'〃)

    看来只要拼命去搞,两个月也是可以搞出来的啊~