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>
Vue学习笔记 template methods,filters,ChromeDriver,安装sass的更多相关文章
- Vue学习笔记：methods、computed、watch的区别
自:https://www.jb51.net/article/120073.htm 首先要说,methods,watch和computed都是以函数为基础的,但各自却都不同 而从作用机制和性质上看,m ...
- vue学习笔记(十)路由
前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...
- vue 学习笔记（二）
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
- Vue学习笔记-Django REST framework3后端接口API学习
一 使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
- Vue学习笔记-vue-element-admin 前端学习
一 使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
随机推荐
- windows10最实用的快捷键、高效的windows模式
win+方向键 将软件窗口放置到方向 ctrl+win+左右方向键 切换虚拟桌面 win+tab 选择窗口或虚拟桌面,然后按着win随后放开,界面停留 alt+tab 切换窗口 ctrl+win+D ...
- Karma和Jasmine 自动化单元测试环境搭建
最近初学AngularJS ,看到的一些教程中经常有人推荐使用Karma+Jasmine来进行单元测试.自己之前也对Jasmine有些了解,jasmine也是一个不错的测试框架. 1. karma介绍 ...
- 测试驱动开发 VS 行为驱动开发
测试驱动开发(Test Driven Development,英文缩写TDD)是极限编程的一个重要组成部分,它的基本思想就是在开发功能代码之前,先编写测试代码.也就是说在明确要开发某个功能后,首先思考 ...
- Python3 MySQL 数据库连接 -PyMySQL
Python 3 操作mysql http://www.runoob.com/python3/python3-mysql.html Python3 MySQL 数据库连接 本文我们为大家介绍 Pyt ...
- XE5安卓手机要求
1 ARMv7 的 CPU v6 的肯定不支持.2 黑屏是因为你的手机 CPU 不支持 NEON 特性.或者是 T2 CPU.3 系统版本 2.3.3 到 2.3.9 或者 4.0 以上.4. SD ...
- 使用ContentPresenter，不使用ContentControl
参考: https://wpf.2000things.com/2017/04/06/1204-using-a-datatrigger-to-change-content-in-a-contentpre ...
- Sql2012 AlwaysOn
准备: 两台宿主机,两台虚拟机,一根交叉线 系统都是windows server 2012 步骤 1.两台虚拟机均为双网卡 2.配置故障转移群集 3.执行AlwaysOn配置(增加Listen此步骤上 ...
- SystemID
A:BJQUANYONG-B:CCC332322987612323008002DDD A:JHDUJIA-B:CCC1365323754641263423809708001DDD A:GUANGZHO ...
- nowcoder(牛客网)普及组模拟赛第一场 解题报告
蒟蒻我可能考了一场假试 T1 绩点 这题没什么好说的,应该是只要会语言的就会做. T2 巨大的棋盘 一个模拟题吧qwq,但是要注意取模的时候先加上n或者m再取模,要不然会错的. #include< ...
- iOS开发其他相关
1.iOS开发行情 1.1 iOS系统各个版本的占比查询 2.Xcode的使用 开发软件下载 Xcode Help(官方) 2.1 Xcode面板 Xcode面板 2.2 Xcode版本新功能 Xco ...