Vue（读音 /vju&#
39;/，类似于 view）是一套用于构建用户界面的渐进式框架，于2014年2月发布。与其它大型框架不同，
Vue被设计为可以自底向上逐层应用，其核心库只关注视图层，不仅易于上手，还便于与第三方库（如
vue-router、
vue-resource、
vuex）或既有项目整合[^1]。
Vue框架的用途广泛，以下是一些常见的应用场景：
- **构建单页面应用（SPA）**：借助
vue-router实现路由功能，实现页面的切换和导航，为用户
带来流畅的交互体验。
```
html
<!DOCTYPE
html>
<
html>
<head>
<meta charset="utf-8">
<title></title>
<script src="
js/
vue@2
.js"></script>
<script src="
js/
vue-router
.js"></script>
</head>
<body>
<div id="app">
<!-- 路由出口 -->
<router-view></router-view>
</div>
<script>
// 定义路由组件
const Home = { template: &#
39;<div>Home Page</div>&#
39; }
const About = { template: &#
39;<div>About Page</div>&#
39; }
// 定义路由
const routes = [
{ path: &#
39;/&#
39;, component: Home },
{ path: &#
39;/about&#
39;, component: About }
]
// 创建路由实例
const router = new
VueRouter({
routes
})
// 创建并挂载根实例
const app = new
Vue({
router
})
.$mount(&#
39;#app&#
39;)
</script>
</body>
</
html>
```
- **数据展示与交互**：利用
Vue的数据绑定和指令，如插值表达式、v-bind、v-on等，方便地将数据展示在页面上，并实现用户交互。
```
html
<!DOCTYPE
html>
<
html>
<head>
<meta charset="utf-8">
<title></title>
<script src="
js/
vue@2
.js"></script>
</head>
<body>
<div id="app">
<!-- 插值表达式 -->
<p>{{ message }}</p>
<!-- 属性绑定 -->
<a v-bind:href="url">Link</a>
<!-- 事件绑定 -->
<button v-on:click="increaseCount">Click me</button>
<p>Count: {{ count }}</p>
</div>
<script>
const app = new
Vue({
el: &#
39;#app&#
39;,
data: {
message: &#
39;Hello,
Vue!&#
39;,
url: &#
39;https://www
.example
.com&#
39;,
count: 0
},
methods: {
increaseCount() {
this
.count++
}
}
})
</script>
</body>
</
html>
```
- **条件渲染和列表渲染**：使用v-if、v-for等指令，根据条件显示或隐藏元素，以及循环渲染列表数据。
```
html
<!DOCTYPE
html>
<
html>
<head>
<meta charset="utf-8">
<title></title>
<script src="
js/
vue@2
.js"></script>
</head>
<body>
<div id="app">
<!-- 条件渲染 -->
<p v-if="showMessage">This message is visible
.</p>
<!-- 列表渲染 -->
<ul>
<li v-for="item in items" :key="item
.id">{{ item
.name }}</li>
</ul>
</div>
<script>
const app = new
Vue({
el: &#
39;#app&#
39;,
data: {
showMessage: true,
items: [
{ id: 1, name: &#
39;Item 1&#
39; },
{ id: 2, name: &#
39;Item 2&#
39; },
{ id:
3, name: &#
39;Item
3&#
39; }
]
}
})
</script>
</body>
</
html>
```
扫一扫
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
