第一个Vue程序

在做一个项目，本打算用Thymeleaf模板引擎呢，但是由于前后端分离的热潮（还有昨天一个原因），让我不得不去学习Vue，话不多说，先创建一个普通的HTML文件，然后cdn导入vue

<script src="http://cdn.bootcss.com/vue/2.1.6/vue.min.js"></script>

直接上全代码吧

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="http://cdn.bootcss.com/vue/2.1.6/vue.min.js"></script>
</head>
<body>
<div id="app"><!--获取数据-->{{msg}}
</div><script>var vm = new Vue({el: "#app", // 绑定元素，el是element的意思data: { // data是数据msg: "hello vue"}});
</script></body>
</html>

直接运行即可

结果如下

判断if循环for

在程序中，有了判断和循环，跟后端交互就舒服了，在Vue里，都是以v-开头的，判断和循环也是如此

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="http://cdn.bootcss.com/vue/2.1.6/vue.min.js"></script>
</head>
<body>
<div id="app"><!--判断--><p v-if="ok">Yes</p><p v-else>No</p><p v-if="type==='A'">A</p><p v-else-if="type==='B'">B</p><p v-else>C</p>
</div><script>var vm = new Vue({el: "#app", // 绑定元素，el是element的意思data: {ok: true,type: 'A'}});
</script></body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="http://cdn.bootcss.com/vue/2.1.6/vue.min.js"></script>
</head>
<body>
<div id="app"><li v-for="item in items">{{item.name}}</li><li v-for="(item,index) in items">{{item.name}} {{item}} {{index}}</li>
</div><script>var vm = new Vue({el: "#app", // 绑定元素，el是element的意思data: {// 中括号是数组，花括号是对象items: [{'name': 'hzy'},{'name': 'lyf'},{'name': 'yy'}]}});
</script></body>
</html>

事件绑定

绑定事件，以点击事件为例，还是老规矩，以v-开头，绑定事件是v-on

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title><script src="http://cdn.bootcss.com/vue/2.1.6/vue.min.js"></script>
</head>
<body>
<div id="app"><!--用v-on绑定事件，这里绑定了点击事件--><button v-on:click="sayHi">点击</button>
</div><script>var vm = new Vue({el: "#app", // 绑定元素，el是element的意思data: {msg: 'hello method'},methods: { //方法必须定义到methods对象中sayHi: function () {alert(this.msg);}}});
</script></body>
</html>

双向数据绑定

什么是双向数据绑定，就是当表单中的数据发生变化时，data中的数据也发生变化，v-model

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="http://cdn.bootcss.com/vue/2.1.6/vue.min.js"></script>
</head>
<body>
<div id="app"><input v-model="msg">{{msg}}
</div><script>var vm = new Vue({el: "#app", // 绑定元素，el是element的意思data: {msg: '123'}});
</script></body>
</html>

组件学习

Vue的组件，其实也就是模板，就是把网站上公共的部分提取出来，像导航栏什么的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="http://cdn.bootcss.com/vue/2.1.6/vue.min.js"></script>
</head>
<body>
<div id="app"><aaa></aaa><!-- v-bind绑定参数 --><bbb v-for="item in items" v-bind:hzy="item"></bbb>
</div><script>// 定义一个vue组件，组件也就是componentVue.component('aaa',{template: '<h1>hello template</h1>'});Vue.component('bbb',{// props属性用来传递参数props: ['hzy'],template: '<li>{{hzy}}</li>>'});var vm = new Vue({el: "#app", // 绑定元素，el是element的意思data: {items: ['java','vue','spring']}});
</script></body>
</html>

Axios异步通信

首先伪造一个data.json

{"age": 20,"code": 0,"url": "www.123","likes": {"name": "java","age": 2}
}

然后通过钩子函数进行axios网络通信，绑定data.json，并且将该数据响应给Vue对象里的data

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title><script src="http://cdn.bootcss.com/vue/2.1.6/vue.min.js"></script><script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
</head>
<body>
<div id="vue">{{info.age}} <br><a v-bind:href="info.url">点击</a> <br>{{info.likes.name}}
</div><script>var vm = new Vue({el: "#vue",data() {return {info: { // 这里的属性值，要和json数据保持一致age: null,url: null,likes: {name: null,age: null}}}},mounted(){ // 钩子函数链式编程axios.get('data.json').then(response=>(this.info=response.data));}});
</script></body>
</html>

计算属性

computed，跟methods差不多，他是计算属性，能缓存

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title><script src="http://cdn.bootcss.com/vue/2.1.6/vue.min.js"></script>
</head>
<body>
<div id="app"><p>{{currentTime1()}}</p><p>{{currentTime2}}</p>
</div><script>var vm = new Vue({el: "#app", // 绑定元素，el是element的意思data: {msg: 'hello method'},methods: { //通过currentTime1()访问currentTime1: function () {return Date.now();}},computed: { // 计算属性，通过currentTime2访问，有缓存currentTime2: function () {return Date.now();}}});
</script></body>
</html>

Vue基本操作及运行截图总结相关推荐

基于SpringBoot+Vue的酒店管理系统(免费获取源码+项目介绍+运行介绍+运行截图+论文)
技术架构后端:SpringBoot+SpringMVC+Mybatis-Plus 前端:vue+ElementUI+HTML+js+css+jquery+Nginx 数据库:MySQL+Thymel ...
HTML基本标签详解与运行截图
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
一元多项式计算器：加、减、乘运算【完整代码+运行截图+实验说明】
原文链接 :https://blog.csdn.net/weixin_44119881/article/details/103717231 注意 [ 此套代码,有所缺陷 !!! ] 目录 1.实 ...
解决 VUE：本地运行和服务器上运行样式不一致，run、build 运行时样式有出入
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 我的情况: 我遇到 2 种情况,一个是表格的分页样式有变化.另一个是导航菜单样式有变化. 2. ...
Vue.js 内部运行机制之总结常见问题解答
Vue.js 内部运行机制之总结 & 常见问题解答总结在本小册的第一节中,笔者对 Vue.js 内部运行机制做了一个全局的概览,当时通过下面这张图把 Vue.js 拆分成一个一个小模块来介 ...
vue/cle3项目运行报错sockjs-node/info解决方案
https://cloud.tencent.com/developer/article/1489598 vue/cle3项目运行报错sockjs-node/info解决方案在这篇文章中: bug复现 ...
uni-app(Vue.js)创建运行微信小程序
uni-app(Vue.js)创建运行微信小程序 1.全局安装 npm install -g @vue/cli 需要安装node,官方网站,否则提示npm不可用 2.创建uni-app 新建文件夹,选 ...
vue实现mp4视频截图
vue实现mp4视频截图需求:按帧数(时间)截取图片 /*** @description : 视频截图* @param {String} url : 视频地址* @param {Number} cu ...
vue自定义配置运行run命令
vue自定义配置运行run命令 1.vuecli3以下 package.json build/build.js webpack.prod.conf.js build/utils.js build/we ...

Vue基本操作及运行截图总结

文章目录