如何快速了解vue的解释和指令方法

最新推荐文章于 2022-09-29 20:38:41 发布

h周杰偷

最新推荐文章于 2022-09-29 20:38:41 发布

阅读量210

点赞数 2

本文链接：https://blog.csdn.net/weixin_58467680/article/details/118144326

版权

这个文章说明的比较详细如果是有了解的小伙伴们可以跳过一些繁琐的基础解释，如果没有了解的小伙伴希望可以耐心看

何为vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

众所周知vue是前端必备的一个要理解的和常用的框架

我们先假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧！之前有其它框架的使用经验会有帮助，但这不是必需的。接下来我们先了解如何使用

第一步先下载vue的文件或引入在线文件

方法有两种

1，是引入在线的文件（官方的一个在线路径只有有网络的情况下才可以使用）

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
这个是开发版本会在工作台提示报错信息

第2种的话是下载

https://cdn.jsdelivr.net/npm/vue@2

https://cdn.jsdelivr.net/npm/vue@2
这个是下载路径在浏览器的搜索框输入这个路径就会看到一个vue的底层源码

我们可以用ctrl+a的方法选中网页的源码在用ctrl+c的方法复制然后在自己新建一个以js为后缀的文件再用ctrl+v黏贴上去（相对于麻烦事，建议新手用上面网络的就行）

这个是ctrl + a 的效果

这个是ctrl + c 的话复制

然后新建一个以js为后缀的文件

ctrl + v 就是这个样子的（使用的话正常引入的话就行了）

2，如何使用vue框架

首先我们先用new创建一个vue的实例（注意这个Vue的话一定要是大写）这个是js里创建的vue的框架

var vue = new Vue({
上面这个是创建vue的一个实例

		//  下面这个是vue的挂载点（也可以理解成根标签）
		  el : "#app",

      下面的存放数据的
			data:{
			 url:2
			},

			// 方法下面这个是vue的一些方法，所有的方法都要用this调用（this表示的是这个vue的实例，也可以理解为额el：后面的css选择器也就是 #app）
			methods:{
				add(){
					if(this.url>=5){
						this.url=2
					}
					this.url++
				}
				 
			}
		 
	})

然后我们看html的结构

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=
	, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
  
	<div id="app">

   这里面就是vue可以操作的作用块
            <ul>
				<li></li>
			</ul>

	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		let vu =new Vue({
			el:'#app',
			data:{
      //  这个里面是数据
			},
			methods:{
      // 这个里面是方法
			}
		})
	</script>
</body>
</html>

这个div上有我们的new的实例所以我们用Vue的一些指令的话只有在这个div里面有用

现在我们了解了基础的一些结构和如何使用，接下来的话我们来说下vue的指令

vue指令

指令是vue模块常用的一些功能是以V—开头的一些自定义属性

了解什么是指令前我们先说一下vue的核心思想，

vue是通过数据驱动叫界面更新，和更新界面

遵循这MVVM的模式

何为MVVM的模式，

MVVM模式就是Model---view----viewModel的简写

M:Model【模型】指的就是后端传人的数据

V:View【视图】指的是所看到的页面

VM：ViewModel【视图模型】mvvm模式的核心，它是连接view和model的桥梁

它有两个方向

1，是将【模型】传换为【视图】，即将后端传达的数据转换成所看到的页面。

2，是将【视图】转化为【模型】，即将所看到的页面转化为后端的数据

这个方向的可以实现的话我们称为双向数据绑定，竟然都有双向数据绑定那当然也有单向数据绑定

我们现在还不理解没有关系我们后面还会说到

那么我们来说一说指令

指令1，V-text

这个是可以将数据显示在页面（但是他不会解析html的标签，并且这个是覆盖式是写入会修改标签的文本内容）

这个是没有文本内容的显示和没有标签的显示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=
	, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="app">
      <ul>
				<li v-text='tete'></li>
			</ul>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		let vu =new Vue({
			el:'#app',
			data:{
      //  这个里面是数据
			tete:"这个是覆盖是的写入"
			},
			methods:{
      // 这个里面是方法
			}
		})
	</script>
</body>
</html>

我们下面看下有文本内容并且有标签的演示

指令2 接下来我们说v-html

这个也是覆盖式的写入，但是它会解析标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=
	, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="app">
      <ul>
				<li v-html='tete'>我是原本的文字</li>
             这里我们改成了v-html
			</ul>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		let vu =new Vue({
			el:'#app',
			data:{
      //  这个里面是数据
			tete:"<h1> 这个是覆盖是的写入 </h1>"
			},
			methods:{
      // 这个里面是方法
			}
		})
	</script>
</body>
</html>

指令3{{}}插值式写入

这个不会改变文本原本的内容还可以进行一些简单的运算式（比如加，减）它也不会解析html的标签（加减话大家自己练习一下，注意数据要是数字哦）

 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=
	, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="app">
      <ul>
				<li >我是原本的文字{{tete}}</li>
			</ul>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		let vu =new Vue({
			el:'#app',
			data:{
      //  这个里面是数据
			tete:"<h1> 这个是覆盖是的写入 </h1>"
			},
			methods:{
      // 这个里面是方法
			}
		})
	</script>
</body>
</html>

指令5 v-on这个我们有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=
	, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="app">
      <ul>
				<li @click="ado">我是原本的文字{{tete}}</li>
			</ul>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		let vu =new Vue({
			el:'#app',
			data:{
      //  这个里面是数据
			tete:"<h1> 这个是覆盖是的写入 </h1>"
			},
			methods:{
      // 这个里面是方法
			  ado(){
					alert('我是方法')
				}
			}
		})
	</script>
</body>
</html>

上面的话我们绑定的是点击事件当我们点击li标签的时候就会执行我们的方法（一些js常用的事件绑定都可以用）

竟然都说到事件类型了我们小伙伴们会不会想有没有事件对像呢，那当然有了

事件对象

比如@click调用方法名的时候后面跟不跟括号都可以，但是如果该方法有参数的话我们有没有书写括号参数的话vue会默认将原生的exent传入我们看下案例（我们在弹出的时候，在工作台打印一下我们默认的事件对象）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=
	, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="app">
      <ul>
				<li @click="ado">我是原本的文字{{tete}}</li>
			</ul>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		let vu =new Vue({
			el:'#app',
			data:{
      //  这个里面是数据
			tete:"<h1> 这个是覆盖是的写入 </h1>"
			},
			methods:{
      // 这个里面是方法
			  ado(e){
					alert('我是方法')
					console.log(e);
				}
			}
		})
	</script>
</body>
</html>

这个传参的话还有好几种情况

那如果方法有参数，我们也需要事件对象进行处理，比如阻止a标签的默认行为。那该如何做呢？

vue提供了一个特殊变量$event，用于访问原生DOM事件。比如:

<a href="http://www.baidu.com" @click="myFn('禁止跳转',$event)">我是按钮</a>
这个$event是vue提供的一个
当我们需要有两个参数的情况我们默认的是最后一个参数
1
let vue = new Vue({
    el: '#app',
    methods: {
        myFn(msg,event){
        	event.preventDefault();
            console.log(msg)
        }
    }
});

事件绑定先就说到这里为了大家可以更好的消化、

指令5 v-bind：这个是可以动态的更新我们的html的元素上的属性,比如；id，class，href ，scr，等也可以简写为：（冒号）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=
	, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="app">
      <ul>
				<img v-bind:src="tete" alt="">
				<li @click="ado"> 点击切换</li>
               当我们点击li的时候我们的img就会变成 ./img/2.jpg
			</ul>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		let vu =new Vue({
			el:'#app',
			data:{
      //  这个里面是数据
			tete:"./img/1.jpeg"
			},
			methods:{
      // 这个里面是方法
			  ado(){
					this.tete= "./img/2.jpg"
				}
			}
		})
	</script>
</body>
</html>

这个是img的文件夹

点击之前是这个样子的

点击之后是这个样子的

这个指令的话我们就可以动态的去改变我们想改变的值

接下来我们来说说我们前面说的双向数据绑定这个是相对于要重要的一个内容

其实看前面的指令我们大概是不是可以猜到前面我们说的内容就是单向数据的绑定，它们的值都是数据写好的，没有办法叫我们在页面去改变那个数据的值这个就是单向数据的绑定，接下来我们来看双向数据的绑定

V-model这个的话通过input框的话我们可以叫我们在页面动态的去改变我们数据的内容话不多说我们看案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=
	, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="app">
      <ul>
			 <input type="text" v-model='tete'>
				<li > {{tete}}</li>
			</ul>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		let vu =new Vue({
			el:'#app',
			data:{
      //  这个里面是数据
			tete:""
			},
			methods:{
      // 这个里面是方法
			  
			}
		})
	</script>
</body>
</html>

这个是我们的input框没有内容的时候的样子

接下来我们向input框输入内容

这个input框的话我们用v-model就给他绑定了一个数据，这个input框的内容就相当于那个data里得tete，当我们页面发生变化的时候我们的数据也同样发生变化这个就是vue的双向数据绑定

很感谢可以看到这里的小伙伴，希望可以对你的不懂和疑惑有所帮助

h周杰偷

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
如何快速了解vue的解释和指令方法

这个文章说明的比较详细如果是有了解的小伙伴们可以跳过一些繁琐的基础解释，如果没有了解的小伙伴希望可以耐心看何为vueVue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。众所周知vue是前端必备的一个要理解的和常用的框架我们先.
复制链接

扫一扫