Vue 介绍 -1

最新推荐文章于 2022-08-06 09:54:45 发布

Ellen-琳子

最新推荐文章于 2022-08-06 09:54:45 发布

阅读量123

点赞数

本文链接：https://blog.csdn.net/weixin_45905671/article/details/105212447

版权

VSCode插件安装
开发 Vue 项目，使用 .vue 的单文件开发，就需要一些插件来帮我们识别 .vue 文件。插件安装在 Extension 中，点开即可看到一个搜索按钮，可以输入关键字搜索自己想要的插件。这里我们开发 Vue 推荐的几个插件：

jshint ： js 代码规范检查。
Beautify ：一键美化代码的插件。
Vetur ： .vue 文件识别插件。
Javascript(ES6) code snippets ： ES6 语法提示。
Auto Rename Tag ：自动重命名标签。标签都是成对出现的，开始标签修改了，结束标签也会跟着修改。
Auto Close Tag ：自动闭合标签。针对一些非标准的标签，这个插件还是很有用的。
vue helper ：一些 Vue 代码的快捷代码。
vscode-icons ：可选。提供了很多类型的文件夹 icon ，不同类型的文件夹使用不同的 icon ，会让文件查找更直观。 9. open in browser ：可选。右键可以选择在默认浏览器中打开当前网页。

Vue介绍

Vue(读音/vjuː/，类似于view) 是一套用于构建前后端分离的框架。刚开始是由国内优秀选手尤雨溪开发出来的，目前是全球“最”流行的前端框架。使用vue开发网页很简单，并且技术生态环境完善，社区活跃，是前后端找工作必备技能！
Vue安装和使用
vue的安装大体上分成三种方式，第一种是通过script标签引用的，第二种是通过npm(node package manager) 来安装，第三种是通过vue-cli命令行来安装。作为初学者，建议直接通过第一种方式来安装，把心思集中在vue的学习上，而不是安装上。

	开发环境 <script	src="https://cdn.jsdelivr.net/npm/vue"></script> #	
    或者是指定版本号 <script	src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> #	或者是下载代码保存到本地 <script	src="lib/vue.js"></script>
	生产环境，使用压缩后的文件 <scriptsrc="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>

基本使用
要使用Vue，首先需要创建一个Vue对象，并且在这个对象中传递el参数，el参数全称是element，用来找到一个给vue渲染的根元素。并且我们可以传递一个data参数，data中的所有值都可以直接在根元素下使用{{}}来使用。示例代码如下：

<div	id="app">				
                <p>{{username}}</p> 
 </div> 
<script>				
    let vm= new Vue({								
           el:	"#app",							
	      data:{												
               	"username":"小班班"							
		}			
	});
	 </script>

其中data中的数据，只能在vue的根元素下使用，在其他地方是不能被vue识别和渲染的

<div	id="app">
 </div> <!--	这里渲染不了	--> 
 <p>{{username}}</p>
  <script>				
          let	vm	=	new	Vue({								
          el:	"#app",								
          data:	{												
          "username":	"小班班"								
          }				
          }); 
          </script>

另外也可以在vue对象中添加methods，这个属性中专门用来存储自己的函数。methods中的函数也可以在模板中使用，并且在methods中的函数来访问data中的值，只需要通过this.属性名就可以访问到了，不需要额外加 this.data.属性名来访问

<div	id="app">
	    <p>{{greet()}}</p> 
<div> 
<script>			
		let	vm = new Vue({								
					el:"#app",								
					data:{												
					"username":	"小班班"							
					},							
					methods:{												
					  greet:function(){															
							return	"晚上好！"+this.username											
					}							
				}			
				}); 
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        username:<p>{{username}}</p>
        password:<p>{{password}}</p>
        <!-- {{demo(username)}} -->
        <!-- <p @click="demo"></p> -->
        <button @click="demo">按钮</button>
        <p v-html="code"></p>
        <div v-html="code"></div>
        <!-- <img v-bind:src=imagesrc alt=""> -->
        <img :src=imagesrc alt="">        
    </div>
</body>
<html>
<!-- 必须联网 -->
<!-- <script	src="https://cdn.jsdelivr.net/npm/vue"></script>   -->
<script	src="./vue.js"></script>  

<script>
    new Vue({
        el:"#app",
        data:{
            "username":"小班班" , 
            "password": 123,
            "code":"<a href='https://www.baidu.com/'>百度一下</a>" ,
            "imagesrc" : "https://www.baidu.com/img/bd_logo1.png?where=super"    
        },
        methods:{
            // demo: function(name){
            //     return "晚上好!" + name
            demo: function(){
                // return "晚上好!" + this.username 
                this.username = "lgcoder"   
            }
        }

    })
</script>

文本
在html中通过{{}}（双大括号）中可以把Vue对象中的数据插入到网页中。并且只要Vue对象上对应的值发生改变了，那么html中双大括号中的值也会立马改变。

<div id="app">				
	<p>{{username}}</p>				
	<button	v-on:click="change">点击修改</button> 
</div>
<script>				
	 let	vm	=	new	Vue({							
	 	el:	"#app",								
	 	data:	{												
	 	"username":	"小班班"					
	 				},							
	 	methods:{
	 		change:	function(){	
	 		       this.username='China';													             															     	 			
	 			}							
	 				}			
	 					}); 
</script>

当然，如果在html的{{}}中，第一次渲染完成后，不想要跟着后期数据的更改而更改，那么可以使用v-once指令来实现。

显示原生的HTML
有时候我们的Vue对象中，或者是后台返回给我们一个段原生的html代码，我们需要渲染出来，那么如果直接通过{{}}渲染，会把这个html代码当做字符串。这时候我们就可以通过v-html指令来实现

<div id="app">			
	<div v-html="code"></div>
</div>
<script>				
	  let vm = new Vue({								
	       el:"#app",								
	       data:{								
	       	"code":	"<a	href='https://www.baidu.com/'>百度一下，你就知道</a>"								
	       }				
	   }); 
</script>

属性绑定
如果我们想要在html元素的属性上绑定我们Vue对象中的变量，那么需要通过v-bind来实现

<div id="app">				
       <img	class="{{classname}}">你好，世界</p> 
</div> 
<script>				
        let	vm = new Vue({								
            el:"#app",								
           data: {											
	           "classname":"pclass"						
			},				
	});
</script>

需要使用v-bind才能生效

<div id="app">	
		<img v-bind:src="imgSrc" alt="">
</div> 
 <script>				
		let vm = new Vue({	
		    el:"#app",								
			data:{												
		      "imgSrc":	"https://i.ytimg.com/vi/5HKZ6bU6Zg0/maxresdefault.jpg"							      }				
			 }); 
</script>

属性绑定Class和Style
在绑定class或者style的时候，可以通过以下方式来实现。
绑定Class
通过数组的方式来实现
在这里插入图片描述
通过对象的方式来实现

绑定Style
用对象的方式

但是样式如果有横线，则都需要变成驼峰命名的方式

用数组的方式

在这里插入图片描述

Ellen-琳子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 介绍 -1

VSCode插件安装开发 Vue 项目，使用 .vue 的单文件开发，就需要一些插件来帮我们识别 .vue 文件。插件安装在 Extension 中，点开即可看到一个搜索按钮，可以输入关键字搜索自己想要的插件。这里我们开发 Vue 推荐的几个插件：jshint ： js 代码规范检查。Beautify ：一键美化代码的插件。Vetur ： .vue 文件识别插件。Javascript...
复制链接

扫一扫