一、起步 1.下载核心库vue.js
bower info vue #查看版本号 npm init --yes #下载vue.js cnpm install vue --save
版本 v2.5.17 目前最新版本（） vue2.0比1.0相比最大的变化就是引入Virtual DOM(虚拟DOM)，页面更新效率高，速度更快 2.hello world（对比 angular）2.1angular实现
js:
let app=angular.module("myApp",[])
app.controller("MyController",["$scope",function($scope){
$scope.msg=" hello world ";
}])
html:
<html ng-app="myApp">
<div ng-controller="myController>
{{msg}}
</div>
</html>
2.2Vue实现
js:
new Vue({
el:"#itany",//指定光联的选择器
data{//存储数据
msg:"hello world",
name:"小零"
}
})
html:
<div id="itany">{{msg}}</div>
3.安装vue-devtools插件，便于在Chrome中调试vue直接将vue-devtools解压缩，
三、常用指令
1.什么是指令？ 用来扩展HTML标签的功能 angular中常用指令： ng-model ng-repeat ng-show/hide ng-if
2.vue中常用的指令 1、v-model 双向数据绑定，一帮用于表单元素
2、v-for （val,key） 对数组或对象进行循环操作，使用v-for,不是v-repeat 注：在vue 1.0中提供了隐式变量，如$index.$key 在vue 2.0中去除了隐式变量，已被废除。
3、v-on 用来绑定事件，用法v-on:事件名="函数"
4、v-show/v-if 用来显示或隐藏元素，v-show是通过display来实现，v-if是每次删除后重新创建，与angular中的类似
四、练习：用户管理
五、事件 1、事件
1.1、事件简写 v-on:click="" 简写方式 @click=""
1.2 事件对象$event（e.target.innerHtml）
1.3 事件冒泡
原生的方法：e.stopPropagation() vue方法：@click.stop
1.4 事件默认行为
阻止事件的默认行为：
原生的方法：e.preventDefault() vue方法：@click.prevent
1.5 键盘事件
@keydown @keypress @keyup
(e.keyCode：按键序号)
简写：
回车： @keydown.13 或 @keydown.enter 上： @keydown.38 或者 @keydown.up
默认没有 @keydown.a/ @keydown.b
1.6 事件的修饰符 .stop - 调用 event.stopPropagation(). .prevent -调用 event.preventDefault(). .{keyCode | keyAlias} -只当事件是从特定键触发时才触发回调 .native - 监听组件根元素的原生事件 .once - 支触发一次回调事件
2、属性：
2.1 属性绑定和属性的简写
v-bind 用于属性绑定：v-bind:属性名=""
简写方式：:属性名=""
2.2class和style属性
绑定class属性和style属性时比较复杂
:class （:class={aa:true,cc:flag}） aa与cc为样式名， true：则运用此样式名的样式， flag：变量，为动态设置是否需要此样式名，flag在data中的值为true/false
:style（）
六、模板
1、简介 Vue.js 基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据， 模板也就是{{}}，用来进行数据绑定，显示在页面中 也称之为Mustache语法
2、数据绑定的方式 a.双向数据绑定 v-model b.单向数据绑定 方式1： 使用两大括号{{}}，肯能会出现闪烁的情况
处理： 用v-cloak 与css ([v-cloak]:display:none;)并用
方法2： 使用v-text/v-html 不会出现闪烁问题
v-html：可识别字符串中的标签
3、其他指令
v-once 只绑定一次 v-pre 不编译，直接显示原样
七、过滤器
1、简介
用来过滤模型数据，在显示之前对数据处理和筛选
语法：{{data | filter1(参数) | filter2（参数）}}
2、关于内置过滤器 vue 1.0 中内置许多过滤器，如：
currency，uppercase，lowercase、limitBy、orderBy、filterBy
vue 2.0中已经删除了所有内置过滤器，全部被废除
如何解决：
a.使用第三方工具 loadash、date-fns日期格式化、accounting.js货币格式化等 b.自定义过滤器
3.自定义全局过滤器
使用全局方法 Vue.filter
原文地址：https://www.cnblogs.com/yuezhen/p/10407675.html
时间： 2024-10-09 00:22:27