Web前端-Vue.js必备框架（二）
Web前端-Vue.js必备框架（二）
vue调式工具vue-devtools
过滤器：vue.js允许你自定义过滤器，可被用作一些常见的文本格式化。
mustache插值和v-bind表达式。
vue生命周期，从创建，运行，到销毁，称为生命周期。
new Vue() : var vm = new Vue({}) 开始创建一个Vue实例对象
init 表示初始化一个Vue空的实例对象，这时候，这个对象上有一些生命周期和默认时间
ajax, vue-resource实现get,post,jsonp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>dashu</title>
<script src="./lib/vue-2.4.0.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>
Id:
<input type="text" class="form-control" v-model="id">
</label>
<label>
Name:
<input type="text" class="form-control" v-model="name">
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add()">
<label>
搜索关键字：
<input type="text" class="form-control" v-model="keywords">
</label>
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{ item.id }}</td>
<td v-text="item.name"></td>
<td>{{ item.ctime }}</td>
<td>
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
keywords: '',
list: [
{ id: 1, name: 'a', ctime: new Date() },
{ id: 2, name: 'b', ctime: new Date() }
]
},
methods: {
add() {
var c = { id: this.id, name: this.name, ctime: new Date() }
this.list.push(c)
this.id = this.name = ''
},
del(id) {
var index = this.list.findIndex(item => {
if (item.id == id) {
return true;
}
})
this.list.splice(index, 1)
},
search(keywords) {
return this.list.filter(item => {
if (item.name.includes(keywords)) {
return item
}
})
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>dashu</title>
<script src="./lib/vue-2.4.0.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>
Id:
<input type="text" class="form-control" v-model="id">
</label>
<label>
Name:
<input type="text" class="form-control" v-model="name" @keyup.f2="add">
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add()">
<label>
<input type="text" class="form-control" v-model="keywords" id="search" v-focus v-color="'green'">
</label>
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{ item.id }}</td>
<td v-text="item.name"></td>
<td>{{ item.ctime | dateFormat() }}</td>
<td>
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div id="app2">
<h3 v-color="'pink'" v-fontweight="900" v-fontsize="50">{{ dt | dateFormat }}</h3>
</div>
<script>
Vue.filter('dateFormat', function (dateStr, pattern = "") {
var dt = new Date(dateStr)
var y = dt.getFullYear()
var m = dt.getMonth() + 1
var d = dt.getDate()
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`
} else {
var hh = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
})
Vue.config.keyCodes.f2 = 113
Vue.directive('focus', {
bind: function (el) {
},
inserted: function (el) {
el.focus()
},
updated: function (el) {
}
})
Vue.directive('color', {
bind: function (el, binding) {
el.style.color = binding.value
}
})
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
keywords: '',
list: [
{ id: 1, name: 'a', ctime: new Date() },
{ id: 2, name: 'b', ctime: new Date() }
]
},
methods: {
add() {
var car = { id: this.id, name: this.name, ctime: new Date() }
this.list.push(car)
this.id = this.name = ''
},
del(id) {
var index = this.list.findIndex(item => {
if (item.id == id) {
return true;
}
})
this.list.splice(index, 1)
},
search(keywords) {
return this.list.filter(item => {
if (item.name.includes(keywords)) {
return item
}
})
}
}
});
var vm2 = new Vue({
el: '#app2',
data: {
dt: new Date()
},
methods: {},
filters: {
dateFormat: function (dateStr, pattern = '') {
var dt = new Date(dateStr)
var y = dt.getFullYear()
var m = (dt.getMonth() + 1).toString().padStart(2, '0')
var d = dt.getDate().toString().padStart(2, '0')
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`
} else {
var hh = dt.getHours().toString().padStart(2, '0')
var mm = dt.getMinutes().toString().padStart(2, '0')
var ss = dt.getSeconds().toString().padStart(2, '0')
return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~~~`
}
}
},
directives: {
'fontweight': {
bind: function (el, binding) {
el.style.fontWeight = binding.value
}
},
'fontsize': function (el, binding) {
el.style.fontSize = parseInt(binding.value) + 'px'
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>dashu</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p>{{ msg | msgFormat('a+1', 'abc') | test }}</p>
</div>
<script>
Vue.filter('msgFormat', function (msg, arg, arg2) {
return msg.replace(/单纯/g, arg + arg2)
})
Vue.filter('test', function (msg) {
return msg + 'vvvvvv'
})
var vm = new Vue({
el: '#app',
data: {
msg: '我是一个单纯的少年'
},
methods: {}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>dashu</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="修改msg" @click="msg='No'">
<h3 id="h3">{{ msg }}</h3>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'ok'
},
methods: {
show() {
}
},
beforeCreate() {
// data 和 methods 中的 数据还没有初始化
},
created() {
// data 和 methods 都已经初始化好了
},
beforeMount() { // 模板已经在内存中编辑完成了，但未把 模板渲染到 页面中
},
mounted() { // 内存中的模板已经挂载到了页面中，用户可以看到渲染好的页面了
},
beforeUpdate() { // 表示界面还没有被更新
},
updated() {
// 页面和 data 数据已经同步了
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>dashu</title>
<script src="./lib/vue-2.4.0.js"></script>
<!-- this.$http.jsonp -->
<script src="./lib/vue-resource-1.3.4.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="get请求" @click="getInfo">
<input type="button" value="post请求" @click="postInfo">
<input type="button" value="jsonp请求" @click="jsonpInfo">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
getInfo() {
this.$http.get('http://vue').then(function (result) {
})
},
postInfo() { // application/x-wwww-form-urlencoded
this.$http.post('http://vue', {}, { emulateJSON: true }).then(result => {
})
},
jsonpInfo() {
this.$http.jsonp('http://vue').then(result => {
})
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>dashu</title>
</head>
<body>
<script>
function showInfo123(data) {
console.log(data)
}
</script>
<script src="http://##?callback=showInfo123"></script>
</body>
</html>
结言
好了，欢迎在留言区留言，与大家分享你的经验和心得。
感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。
作者简介
达叔，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。
Web前端-Vue.js必备框架（二）的更多相关文章
- Web前端-Vue.js必备框架（五）
Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...
- Web前端-Vue.js必备框架（四）
Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...
- Web前端-Vue.js必备框架（三）
Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...
- Web前端-Vue.js必备框架（一）
Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- web前端——Vue.js基础学习
近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...
- Web - 前端 Vue.js （1）
Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...
- web前端——Vue.js基础学习之class与样式绑定
打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧: <html> <head ...
- web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 ☝☝☝
web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 学习 ...
- web前端Vue+Django rest framework 框架 生鲜电商项目实战✍✍✍
web前端Vue+Django rest framework 框架 生鲜电商项目实战 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频 ...
随机推荐
- 【aardio】是否取消三个按键的对话框
import win; var id = win.msgbox("三个按钮","标题",0x3/*_MB_YESNOCANCEL*/) 参考标准库函数: nam ...
- 通过C#发送自定义的html格式邮件
要发送HTML格式邮件,需要设置MailMessage对象的IsBodyHtml属性,设置为true. 类MailMessage在命名空间System.Net.Mail下.using System.N ...
- webpack 打包问题
Project is running at http://localhost:8080/webpack output is served from /dist/webpack: wait until ...
- mac电脑使用技巧和相关快捷键
移动与选取 1. 光标移动 刚从 Windows 转过来的时候可能会发现,Mac 上没有 Home 和 End 键.其实,直接这样就好了: Cmd + ← 移至行首 (Home)Cmd + → 移 ...
- python基础之Day14
一.生成器 1.什么是生成器 在函数内但凡出现yield关键字,再调用函数就不会执行函数体代码,会返回一个值,该值称之为生成器,生成器本质就是迭代器 2.为什么要有生成器 生成器是一种自定义迭代器的方 ...
- skyline开发——加载Shapefile文件
//1)获取道路的GroupID string dlId = ptm.FindGroupByName("道路"); IFeatureLayer66 featureLayer = n ...
- OO前三次作业分析
一,第一次作业分析 度量分析: 第一次的oo作业按照常理来说是不应该有这么多的圈复杂度,但是由于第一次写的时候,完全不了解java的相关知识,按照c语言的方式来写,完全的根据指导书的逻辑,先写好了正确 ...
- Intellij IDEA 环境 tomcat 启动设置
第一步:选择新的新的配置,我选择是Tomcat Server----->Local配置 第二步:配置Server属性 第三步:配置Deployment 第四步:配置Logs,默认配置 第五步:配 ...
- Java和C++的数组比较
Java:数组的定义:如下两种方式都可以:int array[];int[] array; 注意:数组在定义后,不能直接使用.必须在初始化后才能使用.初始化有两种方式:1.静态初始化:int arra ...
- OPENCV中特征提取和匹配的步骤
1.定义特征提取器和描述子提取器: cv::Ptr<cv::FeatureDetector> detector; cv::Ptr<cv::DescriptorExtractor> ...