Vue基本的语法

Vue的基本代码结构及插值表达式&＃xff08;Mustache&＃xff09;

Vue指令之v-text和v-html

Vue指令之v-bind的三种用法

1. 直接使用指令 v-bind

2. 使用简化指令 :

3. 在绑定的时候&＃xff0c;拼接绑定内容&＃xff1a;:title&＃61;"btnTitle &＃43; &＃39;, 这是追加的内容&＃39;"

Vue指令之v-on和跑马灯效果

Vue指令之事件修饰符

• .stop 阻止冒泡

• .prevent 阻止默认事件

• .capture 添加事件侦听器时使用事件捕获模式

• .self 只当事件在该元素本身&＃xff08;比如不是子元素&＃xff09;触发时触发回调

• .once 事件只触发一次

Vue指令之v-model和双向数据绑定

Vue指令之v-for和key属性

1. 迭代数组

• 索引&＃xff1a;{{i}} - 姓名&＃xff1a;{{item.name}} - 年龄&＃xff1a;{{item.age}}



2. 迭代对象中的属性

3. 迭代数字

这是第 {{i}} 个P标签

4. key与列表筛选

为了给 Vue 一个提示&＃xff0c;以便它能跟踪每个节点的身份&＃xff0c;从而重用和重新排序现有元素&＃xff0c;你需要为每项提供一个唯一 key 属性。

Vue指令之v-if和v-show

• v-if&＃xff1a;每次都会重新删除或创建元素 有较高的切换性能消耗
• v-show: 每次不会重新进行DOM的删除和创建操作&＃xff0c;只是切换了元素的 display:none 样式 有较高的初始渲染消耗

一般来说&＃xff0c;v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此&＃xff0c;如果需要频繁切换 v-show 较好&＃xff0c;如果在运行时条件不大可能改变 v-if 较好。

使用内联样式

直接在元素上通过 :style 的形式&＃xff0c;书写样式对象

这是一个H1

将样式对象&＃xff0c;定义到 data 中&＃xff0c;并直接引用到 :style 中

• 在data上定义样式&＃xff1a;

data: {h1StyleObj: { color: &＃39;red&＃39;, &＃39;font-size&＃39;: &＃39;40px&＃39; }
}


• 在元素中&＃xff0c;通过属性绑定的形式&＃xff0c;将样式对象应用到元素中&＃xff1a;

这是一个H1

在 :style 中通过数组&＃xff0c;引用多个 data 上的样式对象

• 在data上定义样式&＃xff1a;

data: {h1StyleObj: { color: &＃39;red&＃39;, &＃39;font-size&＃39;: &＃39;40px&＃39;},h1StyleObj2: { fontStyle: &＃39;italic&＃39; }
}


• 在元素中&＃xff0c;通过属性绑定的形式&＃xff0c;将样式对象应用到元素中&＃xff1a;

这是一个H1

Vue自定义过滤器

Vue.js 允许你自定义过滤器&＃xff0c;可被用作一些常见的文本格式化。过滤器可以用在两个地方&＃xff1a;mustache 插值和 v-bind 表达式。过滤器应该被添加在 Javascript 表达式的尾部&＃xff0c;由“管道”符指示&＃xff1b;

1. 私有过滤器

2. 全局过滤器

Vue.filter(&＃39;tran&＃39;, function (str, mood &＃61; "") {...})


注意&＃xff1a;当有局部和全局两个名称相同的过滤器时候&＃xff0c;会以就近原则进行调用&＃xff0c;即&＃xff1a;局部过滤器优先于全局过滤器被调用&＃xff01;

Vue自定义指令

详见官网api

Vue过渡动画

详见官网api

Vue生命周期函数

new Vue({data: {a: 1},created: function () {// &＃96;this&＃96; 指向 vm 实例console.log(&＃39;a is: &＃39; &＃43; this.a)}&＃xff0c;...
})


Vue组件

定义Vue组件

什么是组件&＃xff1a; 组件的出现&＃xff0c;就是为了拆分Vue实例的代码量的&＃xff0c;能够让我们以不同的组件&＃xff0c;来划分不同的功能模块&＃xff0c;将来我们需要什么样的功能&＃xff0c;就可以去调用对应的组件即可&＃xff1b;
组件化和模块化的不同&＃xff1a;

• 模块化&＃xff1a; 是从代码逻辑的角度进行划分的&＃xff1b;方便代码分层开发&＃xff0c;保证每个功能模块的职能单一&＃xff1b;
• 组件化&＃xff1a; 是从UI界面的角度进行划分的&＃xff1b;前端的组件化&＃xff0c;方便UI组件的重用&＃xff1b;

Vue组件的定义

全局定义的三种方式

1. 使用 Vue.extend 配合 Vue.component 方法&＃xff1a;

var login &＃61; Vue.extend({template: &＃39;

登录

2. 直接使用 Vue.component 方法&＃xff1a;

Vue.component(&＃39;register&＃39;, {template: &＃39;

注册

3. 将模板字符串&＃xff0c;定义到script标签种&＃xff1a;


//同时&＃xff0c;需要使用 Vue.component 来定义组件
Vue.component(&＃39;account&＃39;, {template: &＃39;#tmpl&＃39;
});


注意&＃xff1a; 组件中的DOM结构&＃xff0c;有且只能有唯一的根元素&＃xff08;Root Element&＃xff09;来进行包裹&＃xff01;

使用components属性定义局部子组件

组件中展示数据和响应事件

1. 在组件中&＃xff0c;data需要被定义为一个方法并返回一个对象&＃xff0c;例如&＃xff1a;

Vue.component(&＃39;account&＃39;, {template: &＃39;#tmpl&＃39;,data() {return {msg: &＃39;大家好&＃xff01;&＃39;}},methods: {login() {alert(&＃39;点击了登录按钮&＃39;);}}
});


2. 在子组件中&＃xff0c;如果将模板字符串&＃xff0c;定义到了script标签中&＃xff0c;那么&＃xff0c;要访问子组件身上的data属性中的值&＃xff0c;需要使用this来访问&＃xff1b;

组件切换 使用component标签&＃xff0c;来引用组件&＃xff0c;并通过:is属性来指定要加载的组件

Vue组件间的传值

父组件向子组件传值

注意&＃xff1a;一定要使用props属性来定义父组件传递过来的数据

子组件向父组件传值

1. 原理&＃xff1a;父组件将方法的引用&＃xff0c;传递到子组件内部&＃xff0c;子组件在内部调用父组件传递过来的方法&＃xff0c;同时把要发送给父组件的数据&＃xff0c;在调用方法的时候当作参数传递进去&＃xff1b;

2. 父组件将方法的引用传递给子组件&＃xff0c;其中&＃xff0c;getMsg是父组件中methods中定义的方法名称&＃xff0c;func是子组件调用传递过来方法时候的方法名称

3. 子组件内部通过this.$emit(&＃39;方法名&＃39;, 要传递的数据)方式&＃xff0c;来调用父组件中的方法&＃xff0c;同时把数据传递给父组件使用实例如下&＃xff1a;

Vue-Router的使用

什么是路由

1. 对于普通的网站&＃xff0c;所有的超链接都是URL地址&＃xff0c;所有的URL地址都对应服务器上对应的资源&＃xff1b;

2. 对于单页面应用程序来说&＃xff0c;主要通过URL中的hash(#号)来实现不同页面之间的切换&＃xff0c;同时&＃xff0c;hash有一个特点&＃xff1a;HTTP请求中不会包含hash相关的内容&＃xff1b;所以&＃xff0c;单页面程序中的页面跳转主要用hash实现&＃xff1b;

3. 在单页面应用程序中&＃xff0c;这种通过hash改变来切换页面的方式&＃xff0c;称作前端路由&＃xff08;区别于后端路由&＃xff09;&＃xff1b;

vue-router的基本使用

1. 导入 vue-router 组件类库&＃xff1a;

2. 使用 router-link 组件来导航

登录
注册


3. 使用 router-view 组件来显示匹配到的组件

4. 创建使用Vue.extend创建组件

var login &＃61; Vue.extend({template: &＃39;

登录组件

5. 创建一个路由 router 实例&＃xff0c;通过 routers 属性来定义路由匹配规则

var router &＃61; new VueRouter({routes: [{ path: &＃39;/&＃39;, redirect: &＃39;/login&＃39; },{ path: &＃39;/login&＃39;, component: login },{ path: &＃39;/regist&＃39;, component: register }]
});


6. 使用 router 属性来使用路由规则

var vm &＃61; new Vue({el: &＃39;#app&＃39;,router: router // 使用 router 属性来使用路由规则
});


7. 完整示例

使用redirect实现重定向

{ path: &＃39;/&＃39;, redirect: &＃39;/login&＃39; }


在路由规则中定义参数

定义参数:参数名

{ path: &＃39;/register/:id&＃39;, component: register }


获取参数this.$route.params

var regist &＃61; Vue.extend({template: &＃39;

注册组件 --- {{this.$route.params.id}}

使用 children 属性实现路由嵌套

var router &＃61; new VueRouter({routes: [{ path: &＃39;/&＃39;, redirect: &＃39;/account/login&＃39; }, {path: &＃39;/account&＃39;,component: account,// 通过 children 数组属性&＃xff0c;来实现路由的嵌套children: [ // 注意&＃xff0c;子路由的开头位置&＃xff0c;不要加 / 路径符{ path: &＃39;login&＃39;, component: login }, { path: &＃39;regist&＃39;, component: regist}]}]
});


用Vue-cli3初始化一个Vue项目

安装

npm install -g &＃64;vue/cli
# OR
yarn global add &＃64;vue/cli


安装之后&＃xff0c;你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue&＃xff0c;看看是否展示出了一份所有可用命令的帮助信息&＃xff0c;来验证它是否安装成功。

创建一个项目

1. 运行以下命令来创建一个新项目&＃xff1a;

vue create hello-world


你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel &＃43; ESLint 设置的 preset&＃xff0c;也可以选“手动选择特性”来选取需要的特性。

2. 通过 vue ui 命令以图形化界面创建和管理项目
   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UTd8PTGp-1575449673653)(https://cli.vuejs.org/ui-new-project.png)]

使用命令启动或打包

在一个 Vue CLI 项目中&＃xff0c;&＃64;vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。

这是使用默认 preset 的项目的 package.json&＃xff1a;

{"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build"}
}


通过 npm 或 Yarn 调用这些 script&＃xff1a;

//启动项目
npm run serve
# OR
yarn serve
//打包项目
npm run build
# OR
yarn build


build会在 dist/ 目录产生一个可用于生产环境的包&＃xff0c;带有JS/CSS/HTML的压缩

Ant Design of Vue 组件库的基本使用

整理中…

Ant Design Pro of Vue 的基本使用

整理中…