Vue程序
Vue常用的7个属性
- el属性
- 用来指示vue编辑器从什么地方开始解析，Vue的语法可以说是一个占位符
- data属性
- 用来组织从View中抽象出来的属性，可以说将试图的数据抽象出来存放在data中
- template属性
- 用来设置模板，会替换页面元素，包括占位符。
- methods属性
- 放置在页面中的业务逻辑，JS方法一般都会放置在methods中
- render属性
- 创建真正的Virtual Dom
- computed属性
- 用来计算
- wetch属性
- watch:function(new.old){}
- 监听data中数据的变化
- 两个参数，一个返回心智，一个返回旧值
-
Vue基本语法
<script type="text/javascript" src="../js/vue.min.js"></script> <script> let vm = new Vue({ el: "#app", data: { message: "hello,vue!" } }); </script> -
Vue绑定事件
<button v-on:click="sayHi">click Me</button> <!--导入Vue.js--> <script type="text/javascript" src="../js/vue.min.js"></script> <script> let vm = new Vue({ el: "#app", data: { message: "hello,vue!" }, methods: { sayHi: function () { alert(this.message); } } }); </script> <!--双向绑定--> <div id="app"> 输入的文本：<input type="text" v-model="message"> {{message}} </div> <!--导入Vue.js--> <script type="text/javascript" src="../js/vue.min.js"></script> <script> let vm = new Vue({ el: "#app", data: { message: "hello,vue!" }, methods: { sayHi: function () { alert(this.message); } } }); </script>第一个Vue-cli项目
1、什么是vue-cli
vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板。
预先定义好目录结构及基础代码，就好比我们在创建Maven项目时可以创建一个骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速；
主要的功能
- 同意的目录结构
- 本地调试
- 热部署
- 单元色是
- 集成打包上线
创建 vue init webpack myvue
打开 npm run dev
2、vue组件
- 组件是可复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签Thymeleaf的th:fragment等框架有着异曲同工之妙，通常一个应用会以一颗嵌套的组件树的形式来组织：
3、网络通信
- Axios：是一个开源的可以用在浏览器端和Node JS的异步通信框架，她的主要作用是实现AJAX异步通信，其功能特点如下。
- 从浏览器中创建XMLHttpRequests
- 从node.js创建http请求
- 支持Promise API[JS中链式编程]
- 拦截请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF(跨站请求伪造)
{
"name": "Aaron",
"url": "https://blog.kuangstudy.com",
"page": 1,
"inNonProfit": true,
"address": {
"street": "含光门",
"city": "陕西西安",
"country": "中国"
}
}
<div id="vue">
<div>
{{info.name}}
{{info.address.street}}
{{info.address.city}}
{{info.address.country}}
</div>
<a v-bind:href="info.url">点我</a>
</div>
<!--导入Vue.js-->
<script type="text/javascript" src="../js/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
let vm = new Vue({
el: "#vue",
data(){ // 请求的返回参数格式，必须和JSON字符串一样
return{
info: {
name:null,
address:{
street:null,
city:null,
country:null
},
url: null
}
}
},
mounted(){ // 钩子函数链式编程
axios.get('../data.json').then(response=>(this.info = response.data));
}
})
</script>
4、计算属性
-
计算出来的结果，保存在属性中，内存中运行：虚拟DOM
<div id="app"> <p>currentTime:{{currentTime1()}}</p> <p>currentTime:{{currentTime2}}</p> </div> <script type="text/javascript" src="../js/vue.min.js"></script> <script> let vm = new Vue({ el: "#app", data: { message: "hello,Aaron", }, methods:{ currentTime1: function () { return Date.now(); // 返回一个时间戳 } }, computed:{ // 计算属性 currentTime2: function () { return Date.now(); // 返回一个时间戳 } } }) </script>- 说明：
- methods:定义方法，调用方法是用currentTime1(),需要带括号
- computed:定义计算属性，调用属性使用currentTime2，不需要带括号；this.message是为了能够让currentTime2观察到数据变化而变化
- 如何在方法中的值发生变化，则缓存就会刷新，可以再控制台使用
vm.message="qinjiang",改变下数据的值，再次测试观察效果
- 结论：
- 调用方法时，每次都需要进行计算，既然有计算的过程则必定产生系统开销，哪如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销，
- 说明：
5、插槽（slot）
- 在Vue.js中我们使用
<slot>元素作为承载分发内容的出口，坐着称其为‘插槽’
-
定义一个待办事项的组件
Vue.component("todo",{ template: "<div> \ <div>待办事项</div>\ <ul>\ <div>内容</div>\ </ul>\ </div>\ " }); -
实现待办事项的标题和值，动态绑定。
Vue.component("todo",{ template: "<div> \ <slot name='todo-title'></slot>\ <ul>\ <slot name='todo-items'></slot>\ </ul>\ </div>\ " });
代码：
<div id="app"> <todo> <todo-title slot="todo-title" :title="title"></todo-title> <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items> </todo> </div> <script type="text/javascript" src="../js/vue.min.js"></script> <script> <!-- 组件--> Vue.component("todo",{ template: "<div> \ <slot name='todo-title'></slot>\ <ul>\ <slot name='todo-items'></slot>\ </ul>\ </div>\ " }); Vue.component("todo-title",{ props: ['title'], template: '<div>{{title}}</div>' }); Vue.component("todo-items",{ props: ['item'], template: '<li>{{item}}</li>' }) let vm = new Vue({ el: "#app", data:{ title: "Aaron列表", todoItems:['Aaron','Andy','Amder'] } }) </script>
6、自定义组件
- 通过以上代码不难发现，数据项在Vue的实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢？此时就涉及到参数传递与事件分发了，Vue为我们提供了自定义事件的功能很好的帮助了我们解决了这个问题；使用this.$emit(‘自定义事件名’,参数)，操作过程如下：
-
在Vue对象中创建方法
methods: { removeItems:function (index) { console.log("删除了"+this.todoItems[index]+"Ok"); this.todoItems.splice(index,1); // 一次删除一个元素 } } -
在组件中创建(只能绑定当前组件的方法)
// 只能绑定当前组件的方法 template: '<li>{{index}}---{{item}}<button @click="remove()">删除</button></li>', methods: { remove: function (index) { //自定义事件分发 this.$emit("remove",index) } } -
在视图层建立组件与Vue的链接
v-on:remove="removeItems(index)" :key="index" -
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B6ZWJd4u-1619428781506)(C:\Users\Andy\AppData\Roaming\Typora\typora-user-images\image-20201112184812633.png)]
总结：
1、核心
- 核心：数据驱动。组件化
- 优点：借鉴了AngulaJS的模块化开发和React的虚拟Dom，虚拟Dom就是把操纵放到内存中执行；
2、常用属性
- v-if
- v-else-if
- v-else
- v-for
- v-on 绑定事件，简写@
- v-model 数据双向绑定
- v-bind 给组件绑定参数，简写
3、组件化
- 组合组件slot插槽
- 组件内部绑定事件需要使用到this.$emit(“事件名”,参数);
- 计算属性的特点，缓存计算数据
遵循SoC关注度分离原则，Vue是纯粹的视图框架，并不包含，比如Ajax之类的通信功能，为了解决通信问题，我们需要使用Axios框架做异步通信；
第一个Vue-cli项目
- vue-cli官方提供的一个脚手架，用于快速生成一个Vue的项目模板。
- 主要的功能
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
- 需要的环境
- Node.js
https://nodejs.org/zh-cn/ - 确认Node.js安装成功
- cmd输入node -v，查看是否能够正确打印出版本号即可！
- cmd输入npm -v，查看是否能够正确打印出版本号即可！
- 安装Node.js淘宝镜像加速器（cnpm）
npm install cnpm -g
- Node.js
- 创建Vue cli项目
- 用管理员模式打开cmd 进入到要在的位置创建的文件夹下 cd可以进 入
- 输入
vue init webpack myvue - 一路No,创建成功
- 初始化并且运行
- cd myvue (进入项目)
- npm install （安装依赖）
- npm run dev （运行项目）
- ctrl+c （停止）
- 安装webpack -g 打包
npm install webpack -gnpm install webpack-cli -g
1、webpack打包
-
创建项目
-
创建一个目录用于放置JS模块等资源文件
-
在目录下创建js文件，
// 暴露一个方法 exports.sayHi = function () { document.write("<h3>Aaron</h3>") } -
在目录下创建一个名为main.js的入口文件，用于打包时设置entry属性
// 引入 let hello = require("./hello"); hello.sayHi(); -
在项目目录下创建webpack.config.js配置文件，使用webpack命令打包
module.exports = { entry: './modules/main.js', output: { filename: "./js/bundle.js" } } -
测试打完后的包
<script src="./dist/js/bundle.js"></script>- 打包
webpa ck - 热部署打包
webpack --watch
- 打包
2、vue-router路由
-
说明：Vue Router是Vue.js官方的路由管理器，它和Vue.js的核心深度集成，上构建单页面应用变得易如反掌
-
安装
-
基于一个vue-cli进行测试学习，先查看node_modules中是否存在cue-router
-
vue-router是一个插件包，所以我们还是需要用npm/cnpm来进行安装的，打开命令行工具，进行你的目录，输入下面命令
npm install vue-router --save-dev如果在一个模块化工程中使用它， 必须要通过Vue,use()明确地安装路由功能：
-
-
步骤
-
components下创建组件（Vue）
<template> <h3>内容页</h3> </template> <script> export default { name: "Content" } </script> <style scoped> </style> -
在Src文件下创建路由文件(router)下创建index.js配置文件
// 导入Vue import Vue from 'vue' // 导入路由 import VueRouter from 'vue-router' // 导入组件:content import Content from '../components/Content' // 导入组件:Main import Main from '../components/Main' // 安装路由(把路由安装到Vue里) Vue.use(VueRouter); // 配置导出路由 export default new VueRouter({ routes:[ { // 路由的路径 path: '/content', // 跳转的组件 component: Content },{ // 路由的路径 path: '/main', // 跳转的组件 component: Main } ] }) -
在main主线路
-
import router from './router'导入自动扫描路由 -
new Vue({ el: '#app', // 配置路由 router, components: { App }, template: '<App/>' })
-
-
在App.vue展示出组件
<template> <div id="app"> <h3>Aaron</h3> <router-link to="/main">首页</router-link> <router-link to="/content">内容页</router-link> <router-view></router-view> </div> </template>****
-
3、创建项目
整合Vue+Element-ui
-
vue init webpack hello-vue 创建项目
-
进入创建好的项目
cd hello-vue -
安装路由
npm install vue-router --save-dev -
安装 element-ui
npm i element-ui -S -
安装 依赖
npm install -
安装 SASS 加载器
cnpm install sass-loader node-sass -save-dev -
写组件
-
写路由
-
在主窗口导入Element-ui、安装路由
// 导入Element-ui import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'; // 安装路由 Vue.use(router); Vue.use(Element); -
进入项目cd 项目名
-
运行项目
npm run dev
4、路由嵌套
- 嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成，同样地，URL中各段动态路径也按某种结构对应嵌套的各层组件，
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fKAEnc6D-1619428781509)(F:\Y2课程\Y2课程体系\VueNote\img\image-20201114095125467.png)]
path: '/main',
component: Main,
children:[ // 嵌套路由
{path:'/user/profile',component:pro},
{path:'/user/list',component:list}
]
安装路由
// 导入Element-ui
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
// 安装路由
Vue.use(router);
Vue.use(Element);
-
进入项目cd 项目名
-
运行项目
npm run dev
4、路由嵌套
- 嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成，同样地，URL中各段动态路径也按某种结构对应嵌套的各层组件，
- [外链图片转存中…(img-fKAEnc6D-1619428781509)]
path: '/main',
component: Main,
children:[ // 嵌套路由
{path:'/user/profile',component:pro},
{path:'/user/list',component:list}
]
children： 路由嵌
扫一扫
633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
