程序分析：
tips:
var vm2 = new Vue
({
el:'#app2', // 定义名称
data:{ }, // 定义文本
methods:{ }, // 定义模组
filters:{ } // Vue私有过滤器
}) | v-text | t会覆盖元素中原本的内容 |
| v-cloak | 解决插值表达式闪烁的问题 |
| v-html | 链接 |
| v-bind | Vue提供的属性绑定机制 缩写是 : |
| v-on | Vue提供的事件绑定机制 缩写是 @ |
| v-mode | Vue提供的双向绑定机制 |
| v-for | 可用于迭代数组、迭代对象中的属性、迭代数字 |
难点（新的知识点）：
1、键值修饰符 @keyup.xxx='yyy'
js 里面的键盘事件对应的键码 - 无花1 - 博客园 (cnblogs.com)
2、vue过滤器filters的使用
vue过滤器filters的使用 - 简书 (jianshu.com)
https://www.jianshu.com/p/0018c1962968
3、Java toString() 方法
https://www.runoob.com/java/number-tostring.htmltoString() 方法用于返回以一个字符串表示的 Number 对象值。
如果方法使用了原生的数据类型作为参数，返回原生数据类型的 String 对象值。
如果方法有两个参数， 返回用第二个参数指定基数表示的第一个参数的字符串表示形式
4、js日期自动补零（padStart()方法）
https://www.cnblogs.com/mengzekun/p/11975081.html5、Vue.directive指令定义
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
<!-- app 显示 -->
<div id="app">
<!-- 使用 .panel-heading class 可以很简单地向面板添加标题容器。
使用带有 .panel-title class 的 <h1>-<h6> 来添加预定义样式的标题 -->
<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="from-control" v-model="id">
</label>
<label>
Name:
<input type="text" class="from-control" v-model="name" @keyup.f2="add">
<!-- 定义了 -->
</label>
<!-- <label class="form-label">Id:</label>
<input type="text" class="from-control" v-model="id">
<label class="form-label">Name:</label>
<input type="text" class="from-control" v-model="name"> -->
<input type="button" value="添加" class="btn btn-primary" @click="add">
<label >
搜索名称关键字：
<input type="text" class="form-control" v-model="keywords" v-color="'blue'">
</label>
</div>
</div>
<!-- <table>
<thead>
<tr >
<th>商品名称</th>
<th>数量</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead> -->
<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>
<!-- 1、a href="javascript:js_method();"
这是常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句
2、 a href="javascript:void(0);" onclick="js_method()"
这种方法是很多网站最常用的方法，也是最周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。
3、a href="javascript:;" onclick="js_method()"
这种方法跟跟2种类似，区别只是执行了一条空的js代码。
4、a href="#" onclick="js_method()"
这种方法也是网上很常见的代码，#是标签内置的一个方法，代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。
5、a href="#" onclick="js_method();return false;"
这种方法点击执行了js函数后return false，页面不发生跳转，执行后还是在页面的当前位置。
6、<a href='javascript:todoFun(void)'>删除</a>
这种方法在点击 a 标签时，执行一个 js 另外自定义函数 todoFun(void) 。并传参 void。
综合上述，在a中调用js函数最适当的方法推荐使用：
1、<a href="javascript:void(0);" onclick="js_method()"></a>
2、<a href="javascript:;" onclick="js_method()"></a>
3、<a href="#" onclick="js_method();return false;"></a> -->
<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>
<!-- <input type="button" value="删除" @click.prevent="del(item.id)"> -->
</td>
</tr>
</tbody>
</table>
</div>
<!-- app2 显示 -->
<div id="app2">
<h1 v-color="'red'" v-fontweight="900" v-fontsize="50">{
{ dt | dateFormat() }}</h1>
</div>
<script>
// 定义全局过滤器
Vue.filter('dateFormat', function (dateStr, pattern = "") {
// 根据给定的时间字符串，得到特定的时间
var dt = new Date(dateStr)
// yyyy-mm-dd
var y = dt.getFullYear()
var m = dt.getMonth() + 1
var d = dt.getDate()
// return y + '-' + m + '-' + d
// toLowerCase() 方法用于把字符串转换为小写。
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) { // 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
// 注意： 在每个 函数中，第一个参数，永远是 el ，表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象
// 在元素 刚绑定了指令的时候，还没有 插入到 DOM中去，这时候，调用 focus 方法没有作用
// 因为，一个元素，只有插入DOM之后，才能获取焦点
// el.focus()
},
inserted: function (el) { // inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】
el.focus()
// 和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效
},
updated: function (el) { // 当VNode更新的时候，会执行 updated， 可能会触发多次
}
})
// 自定义一个 设置字体颜色的 指令
Vue.directive('color', {
// 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
// 将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
bind: function (el, binding) {
// el.style.color = 'red'
// console.log(binding.name)
// 和样式相关的操作，一般都可以在 bind 执行
// console.log(binding.value)
// console.log(binding.expression)
el.style.color = binding.value
}
})
var vm = new Vue({
// el
el:'#app',
// data
data:{
id:'',
name:'',
keywords:'',
list: [
{ id: 1, name: '奔驰', ctime: new Date() },
{ id: 2, name: '宝马', ctime: new Date() }
]
},
// method
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;
}
})
// console.log(index)
this.list.splice(index, 1)
},
search(keywords) {
return this.list.filter(item => {
if (item.name.includes(keywords)){
return item}
})
}
}
});
// 新建一个Vue名为app2
var vm2 = new Vue({
el:'#app2',
data:{
dt: new Date(),
},
methods:{
},
filters: {// 定义私有过滤器 过滤器有两个 条件 【过滤器名称 和 处理函数】
// 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器
dateFormat: function (dateStr, pattern = '') {
var dt = new Date(dateStr)
// (method) Number.toString(radix?: number): string
var y = dt.getFullYear()
// toString() 方法用于返回以一个字符串表示的 Number 对象值
// PadStart()自动补齐 （PadStart()头部补齐 PadEnd()尾部补齐）
// PadStart(补充的后数据的大小,'补充的数据')
var m = (dt.getMonth() + 1).toString().padStart(2, '0')
var d = dt.getDate().toString().padStart(2, '0')
return `${y}-${m}-${d}`
}
},
directives: { // 自定义私有指令
'fontweight': { // 设置字体粗细的
bind: function (el, binding) {
el.style.fontWeight = binding.value
}
},
'fontsize': function (el, binding) { // 注意：这个 function 等同于 把 代码写到了 bind 和 update 中去
el.style.fontSize = parseInt(binding.value) + 'px'
}
}
})
</script>
</body>
</html>
本文为作者独立编写
本BLOG上所有的原创文章未经本人许可，不得用于商业用途及传统媒体。网络媒体转载请注明出处，否则属于侵权行为。