Vue的基本使用-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_65685799/article/details/133868189

本文介绍了Vue框架的基础概念，包括MVVM架构的Model-View-ViewModel，模板语法中的文本绑定、属性绑定、条件渲染、列表渲染、v-model双向绑定以及样式绑定。还涵盖了事件绑定和Vue的生命周期函数，如created、mounted、updated和destroyed。

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

vue

什么是vue？

Vue是一套构建用户界面的渐进式框架（mvvm架构设计），Vue的目标是尽可能的通过简单的API实现响应的数据绑定与数据双向绑定。

什么是MVVM架构？

M : Model就是数据模型（亦指数据层(data)）可以是我们固定死的数据，也可以是来自服务器请求来的数据。

V : View就是页面DOM（亦指视图层(View)）主要就是向用户展示信息的。 VM : ViewModel 在vue中就是指vue实例（亦指数据模型层）充当View与Model之间通信的桥梁

模板语法

绑定文本以及html

文本绑定

<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello world!'
  }
})
</script>

属性绑定 v-bind

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性

<div id="app">
    <pre><a v-bind:href="url">百度</a></pre>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.baidu.com'
  }
})
</script>

条件渲染

条件判断是否使用 v-if v-else v-else指令：满足条件显示文字，不满住显示abc

<div id="app">
    <div v-if="type == 'A'">
      A
	</div>
	<div v-else-if="type == 'B'">
	  B
	</div>
	<div v-else-if="type == 'C'">
	  C
	</div>
	<div v-else>
	  Not A/B/C
	</div>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    type: 'A'
  }
})
</script>

列表渲染

v-for 指令需要以 x in sites 形式的特殊语法， sites 是源数据数组并且 x 是数组元素迭代的别名。v-for 可以绑定数据到数组来渲染一个列表：

sites为一个数组，x进行遍历取值，取出id和name的值

	<table>
		<thead>
				<th>id</th>
				<th>name</th>
		</thead>
		<tbody>
			  <tr v-for="x in sites">
			  	<td>  {{ x.id }}</td>
			  	<td>  {{ x.name }}</td>
			  </tr>
		</tbody>
	</table>
</div> 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { id:1,name: 'cat' },
      { id:2, name: 'pig' },
      { id:3, name: 'dog' }
    ]
  }
})
</script>

双向绑定 v-model

在下拉框选择时使用双向绑定，可以获取当前选择的值，进行处理。如：选择百度，那么selected就会等于 www.baidu.com。

<div id="app">
  <select v-model="selected" >
    <option value="">选择一个网站</option>
    <option value="www.baidu.com">百度</option>
    <option value="www.google.com">谷歌</option>
  </select>
 
  <div id="output">
      选择的网站是: {{selected}}
  </div>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    selected: '' 
  }
})
</script>

样式绑定

我们可以单向绑定v-bind进行绑定

<div di="app" :style="mystyle">你好</div>
<script>
new Vue({
    el:"#app",
    data{
        mystyle:"color:red"   //改变颜色
    }
})
</script>

事件绑定

使用@符号绑定点击事件click出行弹窗

<button @click="hello">点击</button>
<script>
new VUe({
    el:"#app",
    methods:{
        hello(){
            alter("你好")
        }
    }
})
</<script>>

Vue的生命周期

创建（created）：数据初始化完成之后调用，但是还没开始有进行挂载。

挂载（mounted）：挂载完成之后调用，也就是在完成Vue组件渲染和替换在页面上

更新（updated）：在重新渲染完成后调用，此时组件已更新到最新状态。可以执行 DOM 相关的操作。

销毁（destroyed）：在实例销毁之后调用，此时所有的事件监听器和子组件都已被移除，可以进行资源释放等操作。