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- ...
随机推荐
- 如何查看HBase的HFile
记一个比较初级的笔记. ===流程=== 1. 创建一张表 2. 插入10条数据 3. 查看HFile ===操作=== 1.创建表 package api; import org.apache.ha ...
- 设计模式19：Chain Of Responsibility 职责链模式（行为型模式）
Chain Of Responsibility 职责链模式(行为型模式) 请求的发送者与接受者 某些对象请求的接受者可能有多种多样,变化无常…… 动机(Motivation) 在软件构建过程中,一个请 ...
- 编写高质量代码改善C#程序的157个建议——建议101：使用扩展方法，向现有类型“添加”方法
建议101:使用扩展方法,向现有类型“添加”方法 考虑如何让一个sealed类型具备新的行为.以往我们会创建一个包装器类,然后为其添加方法,而这看上去一点儿也不优雅.我们也许会考虑修改设计,直接修改s ...
- 编写高质量代码改善C#程序的157个建议——建议73：避免锁定不恰当的同步对象
建议73:避免锁定不恰当的同步对象 在C#中,让线程同步的另一种编码方式就是使用线程锁.线程锁的原理,就是锁住一个资源,使得应用程序在此刻只有一个线程访问该资源.通俗地讲,就是让多线程变成单线程.在C ...
- 解决安装VC6.0后出现MSDEV.EXE错误，无法用打开工程解决方法
问题:安装VC6.0后,在打开项目或添加文件时,出现如下错误: 可能导致原因:由于Ms安装软件的兼容性问题,导致VC6.0安装不完全, 解决方法:--网上打sp6补丁的方法貌似不可用,所以可以采用另一 ...
- [LeetCode 题解]： Valid Parentheses
Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the inpu ...
- c# 跨线程访问窗体UI
定义个结构体用于存储线程中传递的参数信息 struct ImgInfo { public string url; public string path; }; 参数传递到线程中 ImgInfo img ...
- ES6——let 和 const
Let 1.使用 Let声明的变量,所声明的变量只在命令所在的代码块内有效. { Let a=1; var b=2; console.log(a) //在代码块里面 可以正常输出a } console ...
- Windows上编译zlib
把zlib 1.2.8解压到zlib/zlib-1.2.8 在deflate.c文件中把deflate_copyright改成一个static变量. 在zlib目录底下创建并用Visual Studi ...
- 【QTP专题】02_时间同步点问题
一.什么是同步点 同步点是指在一个测试过程中,指示QuickTest等待应用程序中某个特定过程运行完成以后再运行下一步操作.Waits until the specified object prope ...