vue_0">vue基础
- 每天学习一点点，从0到1，从无到有。初步成为vue大神。
- 小编会将自身每天的学习记录的笔记，分享给大家。
vue_test01_4">小编自己写的代码案例及笔记：https://github.com/kedaya-github/vue_test01
vue_5">vue简介
-
vue是一个前端框架。
-
Vue.js是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目进行整合。
-
前端工作主要负责MVC中的V这一层，主要与用户的界面打交道。
-
在Vue中，一个核心的概念，就是让程序员不再操作DOM元素，解放了程序员的双手，让程序员可以有更多的时间去关注业务逻辑。
框架和库的区别
-
框架： 是一套完整的技术解决方案；对项目的侵入性比较大，项目如果需要更换框架，则需要重新构架整个项目。
-
库（插件）： 提供某一个小功能，对项目的侵入小较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求。
MVVM概念
-
MVC是后端的分层开发概念；
-
MVVM是前端视图层的概念，主要关注于 视图分离 ， 也就是说： MVVM把前端的视图层，分成了三个部分 Model ， View ， VM ViewModel
-
在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。
-
• 只要我们Model发生了改变，View上自然就会表现出来。
-
• 当用户修改了View，Model中的数据也会跟着改变。
vue_25">vue对象
-
在js代码中 定义vue实例对象
//使用vue创建 vm对象 var vm = new Vue({ el:"#app", //el 属性定义了 当前vue实例的作用区域 data:{ // data属性 定义了vue实例所用到的 数据 msg:"欢迎来到vue", mm:"你好好", ht:"<h1>我最大</h1>", mytitle:"自定义的title" }, methods:{ //methods属性定义了当前vue实例所用到的函数方法 show:function () { alert("hello"); }, edit(){ aler("吃"); } } })
vue_48">vue指令
-
v-model : 双向绑定
-
{{ 参数名称 }} ： 插值表达式
-
v-cloak ： 解决 插值表达式闪烁的问题
需要先设置一个css样式： [v-cloak]{ display: none; } //然后在 {{}} 的父节点上使用 v-cloak， <p v-cloak>{{msg}}</p> -
v-test : 将参数赋值到标签中，效果类似 插值表达式 ，但是数据会覆盖标签中原有的内容。
-
v-html ： 将html标签的参数，进行赋值
-
v-bind： ： 是vue中，提供的用于绑定属性的指令。v-bind可以简写为一个英文:号
//使用vue创建 vm对象 var vm = new Vue({ el:"#app", data:{ msg:"欢迎来到vue", mm:"你好好", ht:"<h1>我最大</h1>", mytitle:"自定义的title" } }) <button value="按钮" v-bind:title="mytitle">按钮</button> 可以将button的title属性，指定一个变量值mytitle。 -
v-on:事件 ： 事件绑定机制 ， 参数给vue实例中，定义的函数方法名 . v-on 可以缩写为一个**@**
-
在调用方法中传递参数 $event 可以将事件对象传递到方法中。
<button value="按钮" v-bind:title="mytitle" v-on:click="show">按钮</button> -
=> : 建造函数，用于在函数方法定义，可以使方法中的this与方法外的this保持一致。
methods:{ lang() { //进行判断 ， 定时器是否为null 不为nul表示已经开启了 跑马灯 if (this.intervalId != null) return; var _this = this; //设置一个变量 接收当前方法的 this对象关键字 setInterval(() => { // => ： 建造函数， 可以是方法内的this关键字与 //方法外的this关键字 保持一致 //截取第一个字 将第一个 拼接到 最后一个位置 var start = _this.msg.substring(0,1); var end = _this.msg.substring(1); _this.msg = end + start; },400); } }
vue_105">vue的一些注意概念
- 在一个vue实例中，data中的数据，如果发生改变，那么引入的标签的显示也会一起改变。
事件修饰符
-
.stop ： 阻止冒泡行为，只会触发当前自己的事件方法
-
.prevent ： 阻止默认行为，比如a标签中的跳转网页，可以取消阻止不让跳转
-
.capture ： 实现捕获触发的机制。先触发内部的事件，再触发外部的事件。
-
.self ： 阻止当前事件的触发，不处理其他的冒泡行为。
-
.once ： 只能触发一次
v-model和双向数据绑定
-
一般情况下，在vue的对象中，修改了标签的内容数据后，页面中的数据也会一起被修改，单向数据绑定
-
使用表单元素是，页面中也可以输入内容。那么将输入的内容绑定到vue对象的data数据中。就是双向数据绑定。
-
使用 v-model可以实现表单元素和 Model中数据的双向数据绑定。
<!-- h3标签 和 input的msg数据会保持一致 --> <div id="add" style="background-color: green;"> <h3>{{ msg }}</h3> <input type="text" v-model="msg" style="width: 100%"> </div>
vue_131">钩子函数 和 vue的生命周期
-
vue的生命周期分为八个部分：
生命周期的流程：--每个流程对应一个函数，当vue处于某个阶段的时候，会自动触发该阶段的函数 1 初始化前 --BeforeCreate 2 初始化完成 ---***：发送ajax --created 3 双向绑定前 ---BeforeMount 4 双向绑定完成 --Mounted 5 更新前 --BeforeUpdate 6 更新完成--updated 7 销毁前--BeforeDestroyed 8 销毁完成--Destroyed -
钩子函数： 列如 created代表在vue实例对象创建后：
-
我们可以在vue中定义一个created函数，代表这个时期的构造函数，执行一些方法。
var vm = new Vue({ el:"#app", data:{ hello:'' }, created(){ this.hello = 'czdx,一统江湖，千秋万代' } -
总结：
vuecss_167">在vue中使用css样式
通过属性绑定，为元素设置class样式
-
在class中定义 class属性样式，然后通过vue的属性绑定形式，来给标签元素赋值。
-
数组形式：
<!--使用vue的属性绑定 。 使用vue的数组绑定形式--> <div :class="['red' , 'thin' , 'active']">这是一个vue的属性绑定 class样式绑定！！！</div> -
使用三元表达式：
<!--使用vue属性绑定 ， 使用vue的三元表达式--> <!--数组中 加 ''表示为class属性 ， 不加'' 表示为data中的参数 通过对象judge是否为true来判断是否展示class属性样式--> <div :class="['red' , 'thin' , judge ? 'active':'']">这是一个vue的属性绑定 class样式绑定！！！</div> -
数组中嵌套对象
<!--vue属性绑定 ， 数组中嵌套嵌套对象--> <div :class="['red' , 'thin' , {'active' : judge}]">这是一个vue的属性绑定 class样式绑定！！！</div> -
使用对象形式：
<!--使用对象形式 , 对象中的 class属性可以不加 ''--> <div :class="{'red':true , 'italic':true}">这是一个vue的属性绑定 class样式绑定！！！</div>
vuestyle_192">vue通过属性绑定，为元素绑定style内联样式
-
普通绑定：
<!--普通的style样式绑定--> <div :style="{color:'red'}">这是一个vue的属性绑定 class样式绑定！！！</div> -
使用vue对象的data参数
<!--使用vue对象中data参数，进行绑定--> <div :style="styleobj01">这是一个vue的属性绑定 class样式绑定！！！</div> -
使用数组绑定多个style样式
<!--使用数组形式，为元素绑定多个 内联样式属性--> <div :style="[styleobj01 , styleobj02]">这是一个vue的属性绑定 class样式绑定！！！</div>
for指令
-
在标签元素中进行 for循环 ， 来输出data中的数组
-
v-for循环遍历普通的数组
<p v-for="(cust,i) in list">{{ cust }}----索引：{{ i }}</p> -
v-for循环遍历对象数组
<!--使用v-for循环，遍历数组中的对象--> <p v-for="(user,i) in list">{{ user.id }}+++{{ user.name }}----索引：{{ i }}</p> -
v-for遍历对象中的属性值
<!--v-for循环遍历对象中的属性值 ，三个参数： val值 key键 i索引--> <p v-for="(val , key ,i) in list">{{ val }}+++{{ key }}----索引：{{ i }}</p> -
v-for迭代数字
<!--v-for迭代数字 数字迭代从1开始--> <p v-for="(cust ,i) in 10">{{ cust }}----索引：{{ i }}</p>
注意事项
-
在2.2.0+ 的版本里，使用v-for时，必须使用key
-
在v-for循环的时候，key属性要使用v-bind属性绑定的形式，指定key值
-
在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的 字符串 / 数字类型 的key值
v-if 和 v-show
-
v-if的特点是： 每次都会重现删除或者创建元素
-
v-show的特点是： 每次刽重新进行DOM的删除和创建操作，只是切换了元素的display：none 的样式
-
v-if 有较高的切换性能消耗
-
v-show 有较高的初始渲染消耗
-
如果元素涉及到频繁的切换，最好不要使用 v-if
-
如果元素可能永远不会被显示出来被用户看到，则使用v-if
计算属性 computed
-
计算属性本质方法，用途是属性
-
计算属性必须要有返回值
-
计算属性的名称不能与其他模块的名称一样
computed:{ bath(){ //计算属性的本质是方法，使用的目的是属性。 必须要有返回值 //名字不能与 其他区域中定义的 名字重复 return this.birthday.getFullYear() + "---" + (this.birthday.getMonth()+1) + "---" + this.birthday.getDate(); } }
vueaxios_264">vue的axios
- axios是 vue 发送ajax的第三技术
- Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
- axios使用的是 链式调用
get请求：
-
可以在路径后面追加数据
-
.then() ： 为成功返回的处理方法
-
.catch() ： 请求失败的处理方法
// 为给定 ID 的 user 创建请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); -
get请求在路径后面追加参数
// 为给定 ID 的 user 创建请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 可选地，上面的请求可以这样做 axios.get('/user', { params: { ID: 12345 } }).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); });
Post请求
-
可以在post() 中添加传递数据
-
需要后台使用 @RequestBody接收数据。可以传递数组等形式的数据
axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); });
axios总结
- Post 和 Put 的注意事项一致， get 和 delete 一致
- 可以在 .then(） 等方法中，使用箭头函数，this则表示vue对象
