Vue常用知识
Vue常用知识
1.Vue 介绍
# Vue 是一套用于构建用户界面的渐进式框架。 # 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。 # Vue 核心库只关注视图层 # 注意: Vue 是一个框架，相对于 jq 库来说，是有本质的区别的 # 作者：中国人 尤雨溪
2.Vue 安装
<!--///////////////////////////////////////////////////////////////////////////////////////
// 下载路径：https://cn.vuejs.org/v2/guide/installation.html
// 分两个版本
// 1.开发版：包含完整的警告和调试模式
// 2.生产版本：生产版本删除了警告，33.30KB min+gzip
///////////////////////////////////////////////////////////////////////////////////////-->
<!-- 基础使用方式 -->
<body>
<div id="app">
{{ message }}
</div>
</body>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
3.Vue 实例
<!--///////////////////////////////////////////////////////////////////////////////////
// 每个 Vue 应用都是通过用 `Vue` 函数创建一个新的 **Vue 实例**
////////////////////////////////////////////////////////////////////////////////////-->
var vm = new Vue({
// 选项
})
<!--///////////////////////////////////////////////////////////////////////////////////
// 通过打印实例对象发现，其中 el 被Vue 放入了公有属性中，
// 而data 则被放入了 私有属性中，而 data 中的数据，需要被外部使用，
// 于是 Vue 直接将data 中的属性及属性值，直接挂载到 Vue 实例中，也就是说，
// data中的数据，我们可以直接使用 `app.user_name` 直接调用；
////////////////////////////////////////////////////////////////////////////////////-->
<body>
<div id="div">
{{user_name}}
</div>
</body>
<script src="./vue.js"></script>
<script>
var app = new Vue({
// 设置要操作的元素
el:'#div',
// 要替换的额数据
data:{
user_name:'我是一个div'
}
})
// 打印Vue实例对象
console.log(app);
</script>
4.模板插值
<!--///////////////////////////////////////////////////////////////////////////////////////
我们在前面的代码中，使用`{{}}`的形式在 html 中获取实例对象对象中 data 的属性值；
这种使用 `{{}}` 获取值得方式，叫做 ***插值*** 或 ***插值表达式*** ；
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
////////////////////////////////////////////////////////////////////////////////////////-->
<span>Message: {{ msg }}</span>
<!--
Mustache 标签将会被替代为对应数据对象上 `msg` 属性的值。无论何时，绑定的数据对象上 `msg` 属性发生了改变，插值处的内容都会更新。即便数据内容为一段 html 代码，仍然以文本内容展示
-->
<body>
<div id="div">
文本插值 {{html_str}}
</div>
</body>
<script>
var app = new Vue({
el:'#div',
data:{
html_str:'<h2>Vue<h2>'
}
})
</script>
<!--
浏览器渲染结果：<div id="div">文本插值 <h2>Vue<h2></div>
打开浏览器的 REPL 环境 输入 app.html_str = '<s>vue</s>
随机浏览器渲染结果就会改变：<div id="div">文本插值 <s>vue</s></div>
-->
5.v-text / v-html 文本
<!--///////////////////////////////////////////////////////////////////////////////////////
// v-text 和差值表达式的区别
// 1.v-text 标签的指令更新整个标签中的内容(替换整个标签包括标签本身)
// 2.差值表达式，可以更新标签中局部的内容
// v-html
// 1.可以渲染内容中的HTML标签
// 2.尽量避免使用，否则会带来危险(XSS攻击 跨站脚本攻击)
// HTML 属性不能用 {{}} 语法
////////////////////////////////////////////////////////////////////////////////////////-->
<!-- 这个代码是错误的 -->
<body>
<div id="div" {{class}}>
<p v-text="seen"></p>
<p v-html="str_html"></p>
</div>
</body>
<script>
var app = new Vue({
el:'#div',
data:{
seen:'<h1>Vue</h1>',
str_html:'<h1>Vue</h1>',
class:'dd',
}
})
</script>
6.v-bind
<!--///////////////////////////////////////////////////////////////////////////////////
// 可以绑定标签上的任何属性
////////////////////////////////////////////////////////////////////////////////////-->
<!-- 动态绑定图片的路径 -->
<img id=“app” v-bind:src="src" />
<script>
var vm = new Vue({
el: '#app',
data: {
src: '1.jpg'
}
});
</script>
<!-- 绑定a标签上的id -->
<a id="app" v-bind:href="'del.php?id=' + id">删除</a>
<script>
var vm = new Vue({
el: '#app',
data: {
id: 11
}
});
</script>
<!--///////////////////////////////////////////////////////////////////////////////////
// 绑定 class
// 对象语法和数组语法
// 1.对象语法
// 如果 isActive 为 true，则返回的结果为 <div id="app" class="active"></div>
////////////////////////////////////////////////////////////////////////////////////-->
<div id="app" v-bind:class="{active: isActive}">
hei
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
isActive: true
}
});
</script>
<!--///////////////////////////////////////////////////////////////////////////////////
// 2.数组语法
// 渲染的结果：<div id="app" class="active text-danger"></div>
////////////////////////////////////////////////////////////////////////////////////-->
<div id="app" v-bind:class="[activeClass, dangerClass]">
hei
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
activeClass: 'active',
dangerClass: 'text-danger'
}
});
</script>
<!--///////////////////////////////////////////////////////////////////////////////////
// 绑定style
// 对象语法和数组语法
// 1.对象语法
// 渲染的结果：<div id="app" style="color: red; font-size: 40px;">hei</div>
////////////////////////////////////////////////////////////////////////////////////-->
<div id="app" v-bind:style="{color: redColor, fontSize: font + 'px'}">
hei
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
redColor: 'red',
font: 40
}
});
</script>
<!--///////////////////////////////////////////////////////////////////////////////////
// 2.数组语法
// 渲染的结果：<div id="app" style="color: red; font-size: 18px;">abc</div>
////////////////////////////////////////////////////////////////////////////////////-->
<div id="app" v-bind:style="[color, fontSize]">abc</div>
<script>
var vm = new Vue({
el: '#app',
data: {
color: {
color: 'red'
},
fontSize: {
'font-size': '18px'
}
}
});
</script>
<!-- 简化语法 -->
<div id="app">
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
imageSrc: '1.jpg',
}
});
</script>
7.v-model 双向数据绑定
<!--///////////////////////////////////////////////////////////////////////////////////
// 单向数据绑定
////////////////////////////////////////////////////////////////////////////////////-->
<div id="div">
<input type="text" :value="input_val">
</div>
<script>
var app = new Vue({
el: '#div',
data: {
input_val: 'hello world '
}
})
</script>
<!--///////////////////////////////////////////////////////////////////////////////////
// 浏览器渲染结果： <div id="div"><input type="text" value="hello world"></div>
// 通过浏览器 REPL 环境可以进行修改 app.input_val = 'Vue'
// 浏览器渲染结果： <div id="div"><input type="text" value="Vue"></div>
// 我们通过 vue 对象修改数据可以直接影响到 DOM 元素，
// 但是，如果直接修改 DOM 元素，却不会影响到 vue 对象的数据；
// 我们把这种现象称为 单向数据绑定
////////////////////////////////////////////////////////////////////////////////////-->
<!-- 双向数据绑定 -->
<div id="div">
<input type="text" v-model="input_val" >
</div>
<script>
var app = new Vue({
el: '#div',
data: {
input_val: 'hello world '
}
})
</script>
<!--///////////////////////////////////////////////////////////////////////////////////
// 通过 v-model 指令展示表单数据，此时就完成了 双向数据绑定
// 不管 DOM 元素还是 vue 对象，数据的改变都会影响到另一个
////////////////////////////////////////////////////////////////////////////////////-->
<!-- 多行文本 / 文本域 -->
<div id="div">
<textarea v-model="inp_val"></textarea>
<div>{{ inp_val }}</div>
</div>
<script>
var app = new Vue({
el: '#div',
data: {
inp_val: ''
}
})
</script>
<!-- 绑定复选框 -->
<div id="div">
吃饭：<input type="checkbox" value="eat" v-model="checklist"><br>
睡觉：<input type="checkbox" value="sleep" v-model="checklist"><br>
打豆豆：<input type="checkbox" value="ddd" v-model="checklist"><br>
{{ checklist }}
</div>
<script>
var vm = new Vue({
el: '#div',
data: {
checklist: ''
// checklist: []
}
});
</script>
<!-- 绑定单选框 -->
<div id="app">
男<input type="radio" name="sex" value="男" v-model="sex">
女<input type="radio" name="sex" value="女" v-model="sex">
<br>
{{sex}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
sex: ''
}
});
</script>
<!--///////////////////////////////////////////////////////////////////////////////////
// 修饰符
// lazy- 取代 input 监听 change 事件，数据并不是实时改变，而是在失焦或按回车时才更新
// number - 输入字符串转为有效的数字
// trim - 输入首尾空格过滤
////////////////////////////////////////////////////////////////////////////////////-->
<div id="div">
<input type="text" v-model.lazy="input_val">
{{input_val}}
</div>
<script>
var app = new Vue({
el: '#div',
data: {
input_val: 'hello world '
}
})
</script>
8.v-on 绑定事件监听
<!--///////////////////////////////////////////////////////////////////////////////////
// 1.基本使用
////////////////////////////////////////////////////////////////////////////////////-->
<div id="app">
<input type="button" value="按钮" v-on:click="cli">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
cli:function(){
alert('123');
}
}
});
</script>
<!--///////////////////////////////////////////////////////////////////////////////////
// 上面的代码运行是没有问题的，但是，我们不建议这样做，
// 因为 data 是专门提供数据的对象，事件触发需要执行的是一段代码，
// 需要的是一个方法 (事件处理程序) ；
////////////////////////////////////////////////////////////////////////////////////-->
<!-- 修改代码如下 -->
<div id="app">
<!-- 使用事件绑定的简写形式 -->
<input type="button" value="按钮" @click="cli">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
// 将事件处理程序写入methods对象
methods: {
cli: function () {
alert('123');
}
}
});
</script>
<!-- 向事件处理器中传参 -->
<div id="app">
<!-- 直接调用传参即可 -->
<input type="button" value="按钮" @click="cli(1,3)">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
// 接受参数
cli: function (a,b) {
alert(a+b);
}
}
});
</script>
<!--///////////////////////////////////////////////////////////////////////////////////
// 而此时，如果在处理器中需要使用事件对象，则无法获取，
// 我们可以用特殊变量 `$event` 把它传入方法
// <input type="button" value="按钮" @click="cli(1,3,$event)">
////////////////////////////////////////////////////////////////////////////////////-->
methods: {
// 接受参数
cli: function (a,b,ev) {
alert(a+b);
console.log(ev);
}
}
<!--///////////////////////////////////////////////////////////////////////////////////
// 2.事件修饰符
// 原生 JS 代码，想要阻止浏览器的默认行为(a标签跳转、submit提交)，
// 我们要使用事件对象的 preventDefault() 方法
////////////////////////////////////////////////////////////////////////////////////-->
<div id="app">
<a href="http://www.qq.com" id="a">腾百万</a>
</div>
<script>
document.getElementById('a').onclick = (ev)=>{
// 组织浏览器的默认行为
ev.preventDefault();
}
</script>
<!-- 使用修饰符 阻止浏览器的默认行为 -->
<div id="app">
<a href="http://www.qq.com" @click.prevent="cli">腾百万</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
// 将事件处理程序写入methods对象
methods: {
cli: function () {
alert('123');
}
}
});
</script>
<!-- 使用修饰符绑定一次性事件 -->
<div id="app">
<a href="http://www.qq.com" @click.once="cli($event)">腾百万</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
// 将事件处理程序写入methods对象
methods: {
cli: function (ev) {
ev.preventDefault();
alert('123');
}
}
});
</script>
<!--///////////////////////////////////////////////////////////////////////////////////
// 3.按键修饰符
// 绑定键盘抬起事件，但是只有`enter` 键能触发此事件
////////////////////////////////////////////////////////////////////////////////////-->
<div id="app">
<input type="text" @keyup.enter="keyup">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
keyup:()=>{
console.log('111')
}
}
});
</script>
<!--///////////////////////////////////////////////////////////////////////////////////
// 4.系统修饰符
// 按住 shift 后才能触发点击事件
////////////////////////////////////////////////////////////////////////////////////-->
<div id="app">
<input type="button" value="按钮" @click.shift="cli">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
cli:()=>{
console.log('111')
}
}
});
</script>
<!--///////////////////////////////////////////////////////////////////////////////////
// 5.鼠标修饰符
// 鼠标中键触发事件
////////////////////////////////////////////////////////////////////////////////////-->
<div id="app">
<input type="button" value="按钮" @click.middle="cli">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
cli:()=>{
console.log('111')
}
}
});
</script>
<!--///////////////////////////////////////////////////////////////////////////////////
// 6.为什么在 HTML 中监听事件?
// 你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern)
// 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式
// 都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，
// 使用 v-on 有几个好处：
// 1. 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
// 2. 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码
// 可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
// 3. 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。
// 你无须担心如何清理它们。
////////////////////////////////////////////////////////////////////////////////////-->
9.v-show 显示隐藏
<!--///////////////////////////////////////////////////////////////////////////////////
// 根据表达式之真假值，切换元素的 display CSS 属性。
////////////////////////////////////////////////////////////////////////////////////-->
<div id="app">
<p v-show="is_show">Vue</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
is_show:false
},
methods:{},
})
</script>
<!-- 案例：点击按钮切换隐藏显示 -->
<div id="app">
<input type="button" value="按钮" @click="isshow">
<p v-show="is_show">Vue</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
is_show:false
},
methods:{
isshow:function(){
this.is_show = !this.is_show;
}
},
})
</script>
10.v-if / v-else / v-else-if 条件判断
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
type: 'F'
},
})
</script>
11.v-for 循环
<div id="app">
<ul>
<li v-for="(val,key) in arr">{{val}}---{{key}}</li>
</ul>
<ul>
<li v-for="(val,key) in obj">{{val}}---{{key}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
arr: ['a', 'b', 'c'],
obj: { id: 1, name: '李四' }
},
})
</script>
12.v-cloak
<!--///////////////////////////////////////////////////////////////////////////////////
// 和 CSS 规则如 [v-cloak] { display: none } 一起用时，
// 这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕
////////////////////////////////////////////////////////////////////////////////////-->
<div id="app">
<p>{{obj.id}}</p>
</div>
<script src="./vue.js"></script>
<script>
setTimeout(() => {
var vm = new Vue({
el: '#app',
data: {
arr: ['a', 'b', 'c'],
obj: { id: 1, name: '李四' }
},
})
}, 2000);
</script>
<!--///////////////////////////////////////////////////////////////////////////////////
// 当我们的网络受阻时，或者页面加载完毕而没有初始化得到 vue 实例时，
// DOM中的 `{{}}` 则会展示出来；为了防止现象，我们可以使用 CSS 配合
// v-cloak 实现获取 VUE 实例前的隐藏；
////////////////////////////////////////////////////////////////////////////////////-->
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app">
<p v-cloak>{{obj.id}}</p>
</div>
<script src="./vue.js"></script>
<script>
setTimeout(() => {
var vm = new Vue({
el: '#app',
data: {
obj: { id: 1, name: '李四' }
},
})
}, 2000);
</script>
13.v-once
<!--///////////////////////////////////////////////////////////////////////////////////
// 只渲染元素和组件**一次**。随后的重新渲染，
// 元素/组件及其所有的子节点将被视为静态内容并跳过
////////////////////////////////////////////////////////////////////////////////////-->
<div id="app">
<p v-once>{{msg}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:'kkk'
},
})
</script>
14.TodoList 案例
<!--///////////////////////////////////////////////////////////////////////////////////
// 上市产品： [ToDoList](http://www.todolist.cn/) 、
// [奇妙清单](https://www.wunderlist.com/zh/) 、
// [滴答清单](https://www.dida365.com/)
// 学习练手项目 ： [TodoMVC](http://todomvc.com/) 、
// [Vue官方示例](https://cn.vuejs.org/v2/examples/todomvc.html)
// 为什么选择这样的案例：
// 产品功能简洁，需求明确，所需知识点丰富；实现基本功能容易，涵盖所学基础知识；
// 而可扩展性强，完善所有功能比较复杂，所需技术众多；在学习中，可以灵活取舍；
//
// 1.项目初始化
// 在项目目录中执行 npm install 命令，下载所需静态资源 ; 将Vue.js框架代码，
// 复制到 js 目录，在index.html中引入 vue : <script src="./js/vue.js"></script>
// 同时 在 index.html 最下方，项目引入了app.js ;
// 而我们要写的 vuejs 代码，都放在这个文件中
//
// 2 数据遍历
////////////////////////////////////////////////////////////////////////////////////-->
const list_data = [
{id:1,title:'吃饭',stat:true},
{id:2,title:'睡觉',stat:false},
{id:3,title:'打豆豆',stat:true},
]
new Vue({
el:'#todoapp',
data:{
// list_data:list_data,
list_data,// es6属性简写
}
})
<ul class="todo-list">
<li v-for="(val,key) in list_data">
<div class="view">
<input class="toggle" type="checkbox" v-model="val.stat">
<label>{{val.title}}</label>
<button class="destroy"></button>
</div>
<input class="edit" value="Rule the web">
</li>
</ul>
<!--///////////////////////////////////////////////////////////////////////////////////
// 3.展示无数据状态
// 标签及内容都是在 section footer 两个标签中的，当 list_data 中没有数据时，
// 我们只需要隐藏这个两个标签即可：
////////////////////////////////////////////////////////////////////////////////////-->
<section v-if="list_data.length" class="main">
……
</section>
<footer v-if="list_data.length" class="footer">
……
</footer>
<!--///////////////////////////////////////////////////////////////////////////////////
// 两个标签都有 `v-if` 判断 ，因此我们可以使用一个 `div` 包裹两个标签，
// 使 `div` 隐藏即可：
////////////////////////////////////////////////////////////////////////////////////-->
<div v-if="list_data.length">
<section class="main">
……
</section>
<footer class="footer">
……
</footer>
</div>
<!--///////////////////////////////////////////////////////////////////////////////////
// 如果有内容，那么 DOM 书中就会多出一个 div 标签，那么我们可以选择使用
// template(vue中的模板标识)，有内容时，浏览器渲染不会有此节点；
////////////////////////////////////////////////////////////////////////////////////-->
<template v-if="list_data.length">
<section class="main">
……
</section>
<footer class="footer">
……
</footer>
</template>
<!--///////////////////////////////////////////////////////////////////////////////////
// 3.添加任务
// 绑定 `enter` 键盘事件
////////////////////////////////////////////////////////////////////////////////////-->
<input @keyup.enter="addTodo" class="new-todo" placeholder="请输入" autofocus>
new Vue({
el:'#todoapp',
data:{
// list_data:list_data,
list_data,// es6属性简写
},
//添加事件处理器
methods:{
// addTodo:function(){}
// 简写形式
addTodo(){
console.log(123);
}
}
})
<!--///////////////////////////////////////////////////////////////////////////////////
// 修改代码完成任务添加
////////////////////////////////////////////////////////////////////////////////////-->
methods: {
// addTodo:function(){}
// 简写形式
addTodo(ev) {
// 获取当前触发事件的元素
var inputs = ev.target;
// 获取value值，去除空白后判断，如果为空，则不添加任务
if (inputs.value.trim() == '') {
return;
}
// 组装任务数据
var todo_data = {
id: this.list_data.length + 1 + 1,
title: inputs.value,
stat: false
};
// 将数据添加进数组
this.list_data.push(todo_data);
// 清空文本框内容
inputs.value = '';
}
}
<!--///////////////////////////////////////////////////////////////////////////////////
// 4.任务的全选与反选
// 点击文本框左边的下箭头，实现全选和反选操作
// 为元素绑定点击事件
////////////////////////////////////////////////////////////////////////////////////-->
<input @click="toggleAll" id="toggle-all" class="toggle-all" type="checkbox">
<!-- 添加处理程序 -->
toggleAll(ev){
// 获取点击的元素
var inputs = ev.target;
// console.log(inputs.checked);
// 循环所有数据为状态重新赋值
// 因为每个元素的选中状态都是使用 v-model 的双向数据绑定，
// 因此 数据发生改变，状态即改变，状态改变，数据也会改变
for(let i=0;i<this.list_data.length;i++){
this.list_data[i].stat = inputs.checked;
}
}
<!--///////////////////////////////////////////////////////////////////////////////////
// 5.完成任务
// 如果任务完成，状态改为选中，li 的 class 属性为 completed 时文字有中划线
////////////////////////////////////////////////////////////////////////////////////-->
<li v-for="(val,key) in list_data" v-bind:class="{completed:val.stat}">
<!--///////////////////////////////////////////////////////////////////////////////////
// 6.删除任务
// 绑定点击事件，将当前索引值传入事件处理程序
////////////////////////////////////////////////////////////////////////////////////-->
<button @click="removeTodo(key)" class="destroy"></button>
<!-- 按照索引，删除相应的数据 -->
removeTodo(key){
this.list_data.splice(key,1);
},
<!--///////////////////////////////////////////////////////////////////////////////////
// 7.删除已完成的任务
// 绑定事件
////////////////////////////////////////////////////////////////////////////////////-->
<button @click="removeAllDone" class="clear-completed">Clear completed</button>
<!--///////////////////////////////////////////////////////////////////////////////////
// 循环遍历所有数据，删除已被标记为完成的任务
////////////////////////////////////////////////////////////////////////////////////-->
removeAllDone(){
for(let i=0;i<list_data.length;i++){
if(list_data[i].stat == true){
this.list_data.splice(i,1);
}
}
}
<!--///////////////////////////////////////////////////////////////////////////////////
// 循环的代码看起来很不舒服, **`Array.prototype.filter() `** 方法创建一个新数组,
// 其包含通过所提供函数实现的测试的所有元素。
////////////////////////////////////////////////////////////////////////////////////-->
var arr = [1,4,6,2,78,23,7,3,8];
// 原始写法
// var new_arr = arr.filter(function(v){
// // if(v>8){
// // return true;
// // }
// return v>8;
// })
// 箭头函数写法
// var new_arr = arr.filter((v)=>{
// return v>8;
// })
// 精简写法
var new_arr = arr.filter((v)=> v>8);
console.log(new_arr);
<!-- 修改项目代码 -->
removeAllDone(){
// 原始循环判断用法
// for(let i=0;i<list_data.length;i++){
// if(list_data[i].stat == true){
// this.list_data.splice(i,1);
// }
// }
// 上面是循环删除符合条件的数据
// 下面是保留不符合条件的数据
// 原始标准库对象方法
// this.list_data = this.list_data.filter(function(v){
// if(v.stat == false){
// return true;
// }
// })
// 箭头函数方法
// this.list_data = this.list_data.filter(function(v){
// return !v.stat;
// })
// 精简方法
this.list_data = this.list_data.filter((v)=>!v.stat);
},
<!--///////////////////////////////////////////////////////////////////////////////////
// TodoList案例暂时告一段落，我们并没有将产品做完，因为我们需要用到其他知识了；
////////////////////////////////////////////////////////////////////////////////////-->
15.MVVM 设计思想
<!--/////////////////////////////////////////////////////////////////////////////////// // MVC 设计思想： // M: model 数据模型层 提供数据 // V: Views 视图层 渲染数据 // C: controller 控制层 调用数据渲染视图 // // MVVM 设计思想： // M: model 数据模型层 提供数据 // V: Views 视图层 渲染数据 // VM：ViewsModel 视图模型层 调用数据渲染视图 // 由数据来驱动视图（不需要过多考虑dom操作，把重心放在VM） ///////////////////////////////////////////////////////////////////////////////////-->
16.计算属性与侦听器
<!--///////////////////////////////////////////////////////////////////////////////////
// 1.计算属性
////////////////////////////////////////////////////////////////////////////////////-->
<div id="div">
<input type="text" v-model="xing">
<input type="text" v-model="ming">
{{xing + ming}}
</div>
<script>
var app = new Vue({
el: '#div',
data: {
xing:'',
ming:'',
}
})
</script>
<!--///////////////////////////////////////////////////////////////////////////////////
// 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。
// 在模板中放入太多的逻辑会让模板过重且难以维护。
// 因此我们可以使用方法，来进行运算并返回数据：
////////////////////////////////////////////////////////////////////////////////////-->
<div id="div">
<input type="text" v-model="xing">
<input type="text" v-model="ming">
{{ fullname() }}
<!-- 一百次调用，观察时间结果-->
{{ fullname() }}
</div>
<script>
var app = new Vue({
el: '#div',
data: {
xing:'',
ming:'',
},
methods:{
fullname(){
return this.xing+this.ming;
}
}
})
</script>
<!--///////////////////////////////////////////////////////////////////////////////////
// 注意，每次在模板中使用 `{{ fullname() }}` fullname方法就会被调用执行一次；
// 所以，对于任何复杂逻辑，你都应当使用计算属性， 因为计算属性，会自动缓存数据：
////////////////////////////////////////////////////////////////////////////////////-->
<div id="div">
<input type="text" v-model="xing">
<input type="text" v-model="ming">
<br>
{{fulln}}
<!-- 一百次调用 -->
{{fulln}}
</div>
<script>
var app = new Vue({
el: '#div',
data: {
xing:'',
ming:'',
},
computed:{
fulln(){
return this.xing+this.ming+Date.now();
}
}
})
</script>
<!--///////////////////////////////////////////////////////////////////////////////////
// 我们可以将同一函数定义为一个方法而不是一个计算属性。
// 两种方式的最终结果确实是完全相同的。
// 然而，不同的是计算属性是基于它们的依赖进行缓存的。
// 只在相关依赖发生改变时它们才会重新求值；
// 多次调用，计算属性会立即返回之前的计算结果，而不必再次执行函数。
//
// 2.利用计算属性获取未完成任务个数
////////////////////////////////////////////////////////////////////////////////////-->
<span class="todo-count"><strong>{{getNu}}</strong> item left</span>
computed: {
// 未完成任务个数
getNu() {
return (this.list_data.filter((v) => !v.stat)).length;
}
}
<!--///////////////////////////////////////////////////////////////////////////////////
// 3.使用侦听器
////////////////////////////////////////////////////////////////////////////////////-->
<div id="div">
<input type="text" v-model="xing">
<input type="text" v-model="ming">
{{ fullname }}
</div>
<script>
var app = new Vue({
el: '#div',
data: {
xing: '',
ming: '',
fullname:''
},
// 设置侦听器
watch: {
// 侦听器中的方法名和要真挺的数据属性名必须一致
// xing 发生变化，侦听器就会被执行，且将变化后的值和变化前的值传入
xing:function(newVal,old_val){
this.fullname = newVal+this.ming;
},
ming:function(newVal,oldVal){
this.fullname = this.xing+newVal;
}
}
})
</script>
<!--///////////////////////////////////////////////////////////////////////////////////
// 通过上面的案例，我们基本掌握了侦听器的使用，但是我们也发现，与计算属性相比，
// 侦听器并没有优势；也不见得好用，直观上反而比计算属性的使用更繁琐；
// 虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。
// 这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。
// 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
////////////////////////////////////////////////////////////////////////////////////-->
<div id="div">
<input type="text" v-model="xing">
<input type="text" v-model="ming">
{{ fullname }}
</div>
<script src="./jq.js"></script>
<script>
var app = new Vue({
el: '#div',
data: {
xing: '',
ming: '',
fullname:''
},
// 设置侦听器
watch: {
// 侦听器中的方法名和要真挺的数据属性名必须一致
// xing 发生变化，侦听器就会被执行，且将变化后的值和变化前的值传入
xing:function(newVal,old_val){
// this.fullname = newVal+this.ming;
var t = this;
// 在侦听器中执行异步网络请求
$.get('./xx.php',(d)=>{
t.fullname = d;
})
},
}
})
</script>
posted on 2020-03-09 20:02 herisson_pan 阅读(11) 评论(0) 收藏 举报
浙公网安备 33010602011771号