VUE 入门
VUE 入门
一、vue 概念
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
二、在 IDEA 中创建 VUE 项目
1. 第一种创建方式——创建静态 WEB 项目
1.1 新建一个 Static Web 项目
1.2 填写项目名
2. 第二种创建方式——创建空项目
2.1 新建一个 Empty Project 项目
2.2 填写项目名
三、VUE常用指令
1. VUE 入门案例
- 胡子语法：{ {}} ，{ {}} 可以是：【1】表达式；【2】字符串；【3】函数；【4】正则表达式；【5】boolean；【6】…；
- new Vue()：创建 Vue 实例，然后构造函数接收一个对象，对象中有一些属性；
- el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div；
- data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中；
- message：这里我们指定了 data 中的一个 message 属性；
- { {}}：通过 { {}} 的方式取出属性值。
注意：{ {属性}} 该只能在 html 标签的内容（开始标签与结束标签之间）上使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../js/vue.js"></script>
</head>
<body>
<!-- vue 定制模板 -->
<div id="app">
<!-- 模板要填充的数据，属性取值 -->
{
{ message }}
</div>
<script>
var app = new Vue({
// vue 实例对象
el: '#app', // 指定模板
data: {
message: 'Hello Vue!' // 填充模板所需要的数据
}
});
</script>
</body>
</html>
2. v-text
用于更新标签包含的文本，它的作用跟双大括号效果是一样的。
2.1 语法
<p v-text="name"></p>
2.2 例子
<p v-text="name"></p>
<p> {
{name}} </p>
3. v-bind
属性绑定指令，给 html 标签的属性绑定数据，注意冒号后面跟标签的属性，属性后面的等号指向数据，它可以简写为 :class, :href。
3.1 语法
<div v-bind:id="emp.id"></div>
<div :value="emp.name"></div>
3.2 例子
<div id="app">
<!-- {
{属性}} 该只能在 html 标签的内容（开始标签与结束标签之间）上使用 -->
<!-- v-bind：属性绑定指令，给 html 标签的属性绑定数据 -->
<span v-bind:title="title"> {
{msg}} </span>
<br/>
<!-- 简写方式 -->
<span :title="title"> {
{msg}} </span>
<a v-bind:href="href">百度</a>
<img :src="src" width="690" height="370">
最低0.47元/天 解锁文章
1880
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
