Vue框架详解：特点、安装及基本语法-CSDN博客

本文链接：https://blog.csdn.net/Pocketful/article/details/107753051

本文深入探讨Vue框架，详细介绍了Vue的特点，包括解耦视图和数据、可复用组件等。接着讲解了Vue的安装方法，如直接CDN引入、npm安装。进一步阐述了MVVM架构，解析了Vue的指令如v-once、v-html，以及动态绑定、事件监听、条件判断、循环遍历、表单绑定、计算属性、侦听器和过滤器等核心概念，最后讨论了Vue的生命周期及其重要钩子函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Vue

1、特点：

（1）解耦视图和数据
（2）可复用的组件
（3）前端路由技术
（4）状态管理
（5）虚拟DOM

2、安装

（1）直接CDN引入

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

（2）下载和引入开发环境

下载：https://vuejs.org/js/vue.js
生产环境： https://vuejs.org/js/vue.min.js

（3）npm安装

后续通过webpack和CLI的使用，我们使用该方式

二、MVVM架构

在这里插入图片描述

1、View层：视图层

在我们前端开发中，通常就是DOM层。
主要的作用是给用户展示各种信息。

2、Model层：数据层

数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。

3、VueModel层：视图模型层

视图模型层是View和Model沟通的桥梁。
（1）一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
（2）另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要

三、基本语法

（一）Vue的指令

1、vue-once：

该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。

<div id="app">        
	<h2>{
   
   {
   
   message}}</h2>        
	<!--v-once  该指令只会渲染一次，不会随着数据的改变而改变 -->        
	<h2 v-once>{
   
   {
   
   message}}</h2>    
</div>        
<script src="../js/vue.js"></script>        
<script>            
	const app = new Vue({
   
                   
		el: "#app",                
		data: {
   
                      
 			message: "hello vue!",                    
 			firstName: "Kim",                    
 			lastName: "Lily",                    
 			counter: 100               
  		}            
  })        
  </script>

2、v-html

该指令后面会跟上一个String类型，会将String的html解析出来并渲染

<div id="app">            
	<!-- v-html 会将string里的内容解析出来，并且进行渲染 -->        
	<h2 v-html="header"></h2>        
	<h2 v-html="url"></h2>    
</div>    
<script src="../js/vue.js"></script>    
<script>      
	const app = new Vue({
   
           
		el: '#app',       
		data: {
   
              
  			url: '<a href="https://www.baidu.com">aaa</a>',            
  			header: '<div>头部</div>'        
  		},    
  })   
   </script>‘

3、v-textv-text

作用和Mustache比较相似：都是用于将数据显示在界面中v-text通常情况下，接受一个string类型

<div id="app">        
	<h2>{
   
   {
   
   message}}</h2>        
	<!-- v-text就是将数据显示在界面中；一般接收一个String类型 -->        
	<!-- v-test后面的指令中并不是自己定义的字符串，而是data中已经存在的字符串 -->        
	<!--v-test指令会覆盖元素的内容  -->        
	<h2 v-text="message">你好呀！</h2>    
</div>    
<script src="../js/vue.js"></script>   
<script>      
	const app = new Vue({
   
           
		el: '#app',        
		data: {
   
               
			message: "你好呀，vue"        
		},    
	})    
</script>

4、v-pre

用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。`

<div id="app">        
	<h2>{
   
   {
   
   message}}</h2>        
	<!-- v-pre 用于跳过这个元素和它的子元素的编译过程，用于原本的mustache语法 -->        
	<!-- v-pre 会直接显示显示{
   
   {
   
   message}}显示 -->        
	<h2 v-pre>{
   
   {
   
   message}}