技术分享 | 测试平台开发-前端开发之Vue.js 框架的使用(二)
首先将 Vue.js 下载到本地,本章就以本地的 Vue.js 为例。在本地创建一个工作区即创建一个文件夹,使用 vscode 打开,将 Vue.js 放到工作区目录下。
创建挂载元素
首先创建一个 index.html 的文件,使用 <script src="./vue.js"></script>
加载 vue.js,这里的 ./vue.js
路径根据自己 Vue.js 文件位置而定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="./vue.js">
打印
</script>
</body>
</html>
创建Vue实例
创建 Vue 实例的目的是为元素提供数据、方法等
首先在 body 下面创建一个 <div>
标签,它的 id="app"·
<div id="app"></div>
创建 Vue 实例
<div id="app">{{msg}}</div>
<script>
new Vue({
// Vue 实例
el: "#app", // el: 是一个挂载元素的关键字, 后面的 #app 是 css 选择器,表示只在这个元素中起作用。
data: {
// data 是储存数据的地方,div 用到的数据储存在这个地方
msg: "hello world", // msg 类似于变量名,引用用插值的方式 {{msg}} 来引用
},
methods: {
// methods 里面用来定义方法
},
});
</script>
将数据放在 data 中的好处就是不需要频繁的去修改 DOM 中的数据,而是直接的修改 data 中的数据即可。
Vue内部指令
Vue 指令是为了对页面和数据操作更为便捷,这些操作就加左指令,通常以 v-xxx
表示。
常用的指令为:
- v-if v-else:元素是否存在
- v-show:元素是否显示
- v-for:循环
- v-on:绑定事件:简写 @
- v-bind:绑定属性:简写 :
- v-model:绑定数据
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="show('展示_if')">展示_if</button>
<button @click="show('展示_else_if')">展示_else_if</button>
<button @click="show('展示_else')">展示_else</button>
<p v-if="'展示_if' == is_show">hello_if</p>
<p v-else-if="'展示_else_if' == is_show">hello_else_if</p>
<p v-else>hello_else</p>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: "#app",
data: {
is_show: "展示",
},
methods: {
show(tmp) {
this.is_show = tmp;
},
},
});
</script>
@click
等同于v-on:click
分开来看,它是由v-on
和click
组成;v-on
绑定事件监听器。可以用来绑定点击事件、键盘事件等;click
通过单词含义我们可以知道这是点击的意思,在这里表示点击事件;那么v-on:click
合起来看,就表示监控点击事件。v-if
根据表达式有条件的渲染元素。当表达式满足条件后,才会进行渲染。v-else-if
,同等与v-if
,与v-if
或v-else-if
组合使用。var vm = new Vue
,顶一个 Vue 实例,实例名字为 vm。el
,决定之后 Vue 实例会管理哪一个 DOM。data
,Vue 实例对应的数据对象。methods
,定义属于 Vue 的一些方法,可以在其他地方调用,也可以在指令中调用。
这里使用 npm 安装的 Vue 来创建项目。上面已经介绍了 Vue 的安装,接下来就是初始化项目和下载环境所需要的依赖。
初始化项目
使用 vscode 打开一个工作区,在当前的目录下打开一个终端,输入 vue ui
,Vue 就是启动一个 Web 服务,这是一个可视化的界面。
启动的服务地址为 http://localhost:8000
这里的地址以自己实际输出的为准。
通过浏览器访问,这时出现的就是初始化项目的页面。此时是没有项目的状态,点击创建。需要填写项目的路径,然后点击“在此创建新项目”。
需要填写项目的名字、包管理器、以及初始化 git(可选),然后点击下一步。
这里可以选择手动配置,选择自己需要的插件,当然也可以选择其他的选项。主要选择下面的这几个功能,点击下一步。
接下来 CSS pre-processor 选择 stylus,然后点击创建项目。会弹出保存预设,这里选择‘创建项目,不保存预设’即可。
项目中常用的插件
Vue Web 端有下载插件的功能,点击下图的插件,然后点击添加插件。
搜索 vuetify 和 axios 这两个插件,点击安装–>完成安装–>继续,插件安装完成。
项目结构
项目分为三大块:node_modules、public、src 以及其他的附属文件
node_modules
node_modules 是用来存放依赖的地方,这个文件非常的大,所以在上传到 git 的时候,通常不会上传这个文件,而是上传 package.json 的文件
这个文件记录了项目需要用到的依赖,安装文件中的依赖,只需要在命令行里输入 npm install
即可
public
public 中主要是存放静态的资源文件
src
src 存放项目源码及需要引用的资源文件。
- src 下的 assets:存放项目中用到的资源文件,css、js、images 等。
- src 下的 componets:存放 Vue 开发中的组件:HelloWorld.vue 等。
- src 下的 router:vue-router vue 路由的配置文件。
- src 下的 main.js:vue-cli 工程的入口文件。
每个文件的功能就不一一介绍了,主要的是上面这几个文件。
启动 Vue 服务:命令默认为 npm run serve
使用浏览器打开上图的链接,就会显示出当前项目的主页。Vue.js框架的使用就先说到这里啦,大家可以多多练习一下哦~
相关文章
- (尚049)Vue_源码分析_数据代理_效果+(尚050)Vue_源码分析_数据代理_效果_debug+(尚051)Vue_源码分析_数据代理_分析
- Caution using watchers for objects in Vue
- Vue 过滤器
- vue - check-versions.js for semver
- vue - webpack.dev.conf.js for node-portfinder
- js_html_input中autocomplete="off"在chrom中失效的解决办法 使用JS模拟锚点跳转 js如何获取url参数 C#模拟httpwebrequest请求_向服务器模拟cookie发送 实习期学到的技术(一) LinqPad的变量比较功能 ASP.NET EF 使用LinqPad 快速学习Linq
- Vue - 实现信纸输入写作,类似写明信片时的一张背景图片 + 横格纸效果(信纸格子与文字自动对齐、支持自定义背景图、文字或横线大小与颜色,一切由您 DIY 自定义样式)纯CSS完成支持任何vue项目
- Vue - 实现用 JS 调用自定义组件 / 类似 ElementUI 弹框组件(在 js 文件中通过 this.xxx 方式调用并显示自定义弹框模态框组件)
- Vue——详解MVVM模型在vue中的使用
- 详解Vue PC端如何实现扫码登录功能
- 带你深入了解一下vue.js中的this.$nextTick!
- vue自定义弹框
- Vue之methods watch和compute的区别和联系
- vue中的main.js打开直接报错问题解决
- 【Vue】Mock.js的使用教程,入门级(附代码和案例)
- Vue报错笔记(1)vue.esm.js?efeb:628 [Vue warn]: Property or method “handleClick“ is not defined on the...
- Vue项目(vuecli3.0搭建)集成高德地图实现路线轨迹绘制
- vue中单选框与多选框的实现与美化
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
- 前端技术:vue(Vue项目中-axios设置默认请求地址和请求头)
- vscode快速生成vue代码---创建Vue代码模板
- vue.js 样式绑定 font-size 问题
- 包学会之浅入浅出 Vue.js:开学篇
- Vue项目安装core-js报错解决方案
- Vue.js 技术揭秘学习 (3) render
- Vue.js 技术揭秘学习 (2) Vue 实例挂载的实现
- 【转】从零开始开发一个vue组件打包并发布到npm (把vue组件打包成一个可以直接引用的js文件)