基本概念

div与vue实例绑定

挂载点，模板，实例之间的关系

插入页面的其他写法

模板指令

Vue中的属性绑定和双向数据绑定

Vue中的计算属性和侦听器

v-if，v-show，v-for指令

TodoList功能开发

TodoList中组建的拆分

TodoList的删除

基本概念

目前有个功能，要使用到前端，本来是用Bootstrap的，但领导要求要用vue框架来做，本来还有的情绪，但在继续学习spring boot开发，使用前端的时候，发现大家都是使用vue，而且一般后端发送json数据，vue来解析，这的确是非常方便，比Bootstrap好了很多倍。今天特意花一天时间来初步学习下vue这个创建。

div与vue实例绑定

程序运行截图如下：

源码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门</title><script src="https://cdn.jsdelivr.net/npm/vue"></script>
<head><body><div id="root">{{msg}}</div><script>new Vue({el: "#root",data: {msg: "How old are you"}})</script>
</body></html>

这里是创建vue实例与html上的元素进行绑定

el：让vue的实例接管哪一个element，上面的代码是接管root；

data：为vue实例里面的数据。

挂载点，模板，实例之间的关系

如下代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门</title><script src="https://cdn.jsdelivr.net/npm/vue"></script>
<head><body><div id="root"></div><script>new Vue({el: "#root",template: '<h1>Hello! {{msg}} The number is {{number}}</h1>',data: {msg: "How old are you",number: 10086}})</script>
</body></html>

运行截图如下：

挂载点：就是html中的div的那个root就为挂载点；

实例：script中new Vue就是一个实例；

模板：挂载点内部的内容都称之为模板，如上面的template。

挂载点用于显示数据，实例用于存储数据和其他绑定，模板用于提供数据。

插入页面的其他写法

插值法：{{}}

代码就是上面的那些！

v-text显示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门</title><script src="https://cdn.jsdelivr.net/npm/vue"></script>
<head><body><div id="root" v-text="msg"></div><script>new Vue({el: "#root",//template: '<h1>Hello! {{msg}} The number is {{number}}</h1>',data: {msg: "How old are you",number: 10086}})</script>
</body></html>

运行截图如下：

v-html显示

源码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门</title><script src="https://cdn.jsdelivr.net/npm/vue"></script>
<head><body><div id="root" v-html="content"></div><script>new Vue({el: "#root",//template: '<h1>Hello! {{msg}} The number is {{number}}</h1>',data: {msg: "How old are you",content: "<h1>How are you<h1>"number: 10086}})</script>
</body></html>

运行截图如下：

这里v-html主要用与当有<h1>这种修饰的。

模板指令

如果有这样的一种功能，点击源码中的<h1>标签内容，然后变成How old are you

使用v-on来绑定点击事件：

点击后：

源码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head><body><div id="root"><div v-on:click="handleClick"><h1>{{content}}</h1></div></div><script>new Vue({el: "#root",data: {content: "How are you"},methods: {handleClick: function(){this.content = "How old are you"}}})</script>
</body></html>

这里可以简写把v-on简写成@

源码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head><body><div id="root"><div @click="handleClick"><h1>{{content}}</h1></div></div><script>new Vue({el: "#root",data: {content: "How are you"},methods: {handleClick: function(){this.content = "How old are you"}}})</script>
</body></html>

Vue中的属性绑定和双向数据绑定

html中有个title，当鼠标移动上去会有tip显示：

源码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head><body><div id="root"><div title="hehehehehehehda"><h1>呵呵</h1></div></div><script>new Vue({el: "#root"})</script>
</body></html>

v-bind指XXX属性和什么数据项绑定

源码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head><body><div id="root"><div v-bind:title="title"><h1>呵呵</h1></div></div><script>new Vue({el: "#root",data: {title: "呵呵呵额和"}})</script>
</body></html>

用一个input框，输入数据后修改h1标签的内容这样进行双向数据绑定。

其中v-bind:可以简写为 : 这个符号

使用v-model可以实现双向绑定

下面代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head><body><div id="root"><input v-model="content" /><div><h1>{{content}}</h1></div></div><script>new Vue({el: "#root",data: {title: "呵呵呵",content: "mmp"}})</script>
</body></html>

运行截图如下：

Vue中的计算属性和侦听器

先构造如下页面，输入姓名后，会在上面显示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head><body><div id="root">姓：<input v-model="firstName" />名：<input v-model="lastName" /><div><h1>{{firstName}}{{lastName}}</h1></div></div><script>new Vue({el: "#root",data: {firstName: '',lastName: ''}})</script>
</body></html>

运行截图如下：

还可以通过这种方式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head><body><div id="root">姓：<input v-model="firstName" />名：<input v-model="lastName" /><div><h1>{{fullName}}</h1></div></div><script>new Vue({el: "#root",data: {firstName: '',lastName: ''},computed: {fullName: function(){return this.firstName + this.lastName}}})</script>
</body></html>

下面说下侦听器，当修改了input后，Vue中的count属性会加1

使用watch关键字！

运行截图如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head><body><div id="root">姓：<input v-model="firstName" />名：<input v-model="lastName" /><div><h1>{{fullName}}</h1></div><div><h1>{{count}}</h1></div></div><script>new Vue({el: "#root",data: {firstName: '',lastName: '',count: 0},computed: {fullName: function(){return this.firstName + this.lastName}},watch:{fullName: function(){this.count ++}}})</script>
</body></html>

v-if，v-show，v-for指令

如果有下面这个需求，点击按钮text就影藏，再点击就显示！

如下源码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head><body><div id="root"><div v-if="show"><h1>Hello world</h1></div><button @click="handleClick">toggle</button></div><script>new Vue({el: "#root",data: {show: true},methods: {handleClick: function(){this.show =! this.show;}}})</script>
</body></html>

运行截图如下：

点击后：

同样，使用这种方式也是可以的，至少看起来是一样的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head><body><div id="root"><div v-show="show"><h1>Hello world</h1></div><button @click="handleClick">toggle</button></div><script>new Vue({el: "#root",data: {show: true},methods: {handleClick: function(){this.show =! this.show;}}})</script>
</body></html>

使用v-show，实际上并没有从dom树上删除，而是加了一个display: none的属性值。

从性能上面来说，v-show的确要高些，因为他不用被销毁。

下面来看看v-for，做一个循环展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head><body><div id="root"><ul><li v-for="item of list">{{item}}</li></ul></div><script>new Vue({el: "#root",data: {list: [1, 2, 3]}})</script>
</body></html>

运行截图如下：

这里有个小技巧，输入:key可以提升每一个item的渲染性能，并且添加index会得到下标：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head><body><div id="root"><ul><li v-for="(item, index) of list" :key="item">{{item}}  {{index}}</li></ul></div><script>new Vue({el: "#root",data: {list: ['球球', '腿腿', '米线']}})</script>
</body></html>

运行截图如下：

TodoList功能开发

要做一个功能，一个输入框一个提交，点击提交，数据就会在列表中；

运行截图如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head><body><div id="root"><input v-model="inputValue"/><button @click="handleSubmit">提交</button><ul><li v-for="(item, index) of list" :key="index">{{item}}</li></ul></div><script>new Vue({el: "#root",data: {inputValue: "Hello",list: []},methods:{handleSubmit: function(){this.list.push(this.inputValue)this.inputValue = ""}}})</script>
</body></html>

TodoList中组建的拆分

组建：页面上的某一个部分。

通过组建，但项目比较大的时候，一般企业都应该采用的方式；

把上面的TodoList改成组建的形式：

使用Vue.component进行组建的注册，这个组建是一个全局的组建。

使用 var TodoItem = {

template: '<li>item</li>'

}

这种是局部组建，需要在vue中做一个声明

components:{

}

如下的全局组建：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head><body><div id="root"><input v-model="inputValue"/><button @click="handleSubmit">提交</button><ul><todo-item></todo-item></ul></div><script>Vue.component('todo-item', {template: '<li>呵呵</li>'})new Vue({el: "#root",data: {inputValue: '',list: []},methods:{handleSubmit: function(){this.list.push(this.inputValue)this.inputValue = ""}}})</script>
</body></html>

运行截图如下：

局部组建：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head><body><div id="root"><input v-model="inputValue"/><button @click="handleSubmit">提交</button><ul><todo-item></todo-item></ul></div><script>//Vue.component('todo-item', {// template: '<li>呵呵</li>'//})var TodoItem = { template: '<li>item</li>' }new Vue({el: "#root",components: {'todo-item': TodoItem},data: {inputValue: '',list: []},methods:{handleSubmit: function(){this.list.push(this.inputValue)this.inputValue = ""}}})</script>
</body></html>

接收从外部传来的content属性：

源码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head><body><div id="root"><input v-model="inputValue"/><button @click="handleSubmit">提交</button><ul><todo-item v-for="(item, index) of list" :key="index" :content="item"></todo-item></ul></div><script>Vue.component('todo-item', {props: ['content'],template: '<li>{{content}}</li>'})new Vue({el: "#root",data: {inputValue: '',list: []},methods:{handleSubmit: function(){this.list.push(this.inputValue)this.inputValue = ""}}})</script>
</body></html>

注意，在Vue中每一个组建都是Vue的实例。

TodoList的删除

使用handleSubmit实现删除的功能：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head><body><div id="root"><input v-model="inputValue"/><button @click="handleSubmit">提交</button><ul><todo-item v-for="(item, index) of list" :key="index" :content="item":index="index" @delete="handleDelete"></todo-item></ul></div><script>Vue.component('todo-item', {props: ['content', 'index'],template: '<li @click="handleClick">{{content}}</li>',methods:{handleClick: function(){//触发后发送事件this.$emit('delete', this.index)}}})new Vue({el: "#root",data: {inputValue: '',list: []},methods:{handleSubmit: function(){this.list.push(this.inputValue)this.inputValue = ""},handleDelete: function(index){this.list.splice(index, 1)}}})</script>
</body></html>

这种套路和Qt有点像，今天的基本认识就到这里了，这个笔记真的丰富啊

前端笔记-Vue框架的基本认识相关推荐

09_前端笔记-Vue
文章目录基础项目工程管理编写路由整合插件整合模板个人博客 https://blog.csdn.net/cPen_web Vue.js 官网 https://cn.vuejs.org/ 基础 ...
前端笔记-vue cli中使用echarts画江苏省地图
目录基本概念代码与实例基本概念这里使用echarts,框架用vue cli,下面这个链接是vue cli导入echarts https://blog.csdn.net/qq78442761/a ...
Web前端笔记-vue cli中使用echarts加载geo地图
效果是这样的: 此处是使用echarts加载geo地图. 这里简单说下逻辑: 首先npm下个包: npm install echarts 然后用个vue组件封装下. 如下代码: <templat ...
前端笔记-vue cli中使用router-link进行路由跳转
目录以前的方法新方法以前的方法以前是通过router的push进行跳转,代码如下: <template><div class="XXXXXXXXXXXXXXXXX& ...
前端笔记-Vue中缺少router-view导致跳转失效
今天这个问题搞了我2个多小时,原因是我在App.vue里面把<router-view/>删除了,导致了跳转失败! 最后才发现,这个App.vue被改了,在此记录下,方便以后查阅! 这里个人 ...
前端笔记-Vue cli中使用axios后JavaScript变量传输给vue变量要注意的地方
目录 axios.all中的注意事项为什么要采用全局的JavaScript变量给vue变量 axios.all中的注意事项如下的请求: methods:{getData(){axios.all([ ...
前端笔记-vue cli中axios批量发送get和post请求及注意事项
目录基本概念关键代码基本概念这里安装好axios后,还要安装qs npm install --save qs 在vue cli中在created里面调用方法,他会在页面加载完成后自动调用! 批 ...
前端笔记-vue cli为web添加底纹
目录基本概念代码与实例基本概念这里主要是使用了css预处理首先下载包 npm install stylus stylus-loader 随后创建文件,然后写代码这里还要导入代码: 这里还要 ...
前端笔记-vue中引入Bootstrap
目录过程演示源码打包下载过程演示首先在项目中导入插件: npm install jquery --save npm install bootstrap --save npm install p ...

前端笔记-Vue框架的基本认识

基本概念

div与vue实例绑定

挂载点，模板，实例之间的关系

插入页面的其他写法

模板指令

Vue中的属性绑定和双向数据绑定

Vue中的计算属性和侦听器

v-if，v-show，v-for指令

TodoList功能开发

TodoList中组建的拆分

TodoList的删除

前端笔记-Vue框架的基本认识相关推荐

最新文章

热门文章