vue基础教程（上篇）
❤️ 目录
- 2、vue基础教程
-
- 一.初识vue
-
- 1.什么是vue
- 2.安装vue
- 3.MVVM的介绍
- 4.一个Hello World小案例
- 二.vue基础语法
-
- 1.指令
-
- 1.1 v-text
- 1.2 v-html
- 1.3 v-on
- 1.4 v-bind
- 1.5 v-if/v-show
- 1.6 v-if/v-else-if/v-else
- 1.7 v-for
2、vue基础教程
一.初识vue
1.什么是vue
-
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
-
Vue 只关注视图层， 采用自底向上增量开发的设计。
-
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
-
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
-
当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。
2.安装vue
- 方法一(不推荐使用）：进入官网，安装Vue Devtools插件（使用Chrome浏览器）
官网网址如下：https://vuejs.bootcss.com/guide/installation.html
-
方法二：在 Vue.js 的官网上直接下载 vue.min.js 并用
3.MVVM的介绍
MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。
4.一个Hello World小案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue基础title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="root">
<h1>{{name}}h1>
div>
<script type="text/javascript">
// 创建vue实例
var app = new Vue({
el: '#root',
data: {
name: 'Hello World!'
}
})
script>
body>
html>
二.vue基础语法
1.指令
1.1 v-text
通过v-txet，可以替换掉了标签中的内容，但会覆盖元素内部原有的内容，在实际开发中大多使用{{}}插值表达式。
<body>
<div id="root">
<h1 v-text="name">{{name}}h1>
div>
<script type="text/javascript">
var app = new Vue({
el: '#root',
data: {
name: 'Hello World!'
}
})
script>
body>
1.2 v-html
v-text和插值表达式只能渲染纯文本，但v-html可以把带有标签的字符串，渲染成真正的HTML内容。
<body>
<div id="root">
<h1 v-h
<button v-on:click="add">+1button>
<button @click="add">+1button>
div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
count: 0
},
methods: {
add: function () {
console.log('ok')
}
},
})
script>
body>
1.4 v-bind
给元素的属性动态绑定属性值。
<body>
<div id="root">
<input type="text" v-bind:placeholder="tips">
<input type="text" :placeholder="tips">
div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
tips: '请输入用户名'
},
})
script>
body>
1.5 v-if/v-show
辅助开发者对元素进行显示或隐藏的操作。
<body>
<div id="root">
<p v-if="flag">大头p>
<p v-show="flag">是你的大头呢p>
div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
flag:true
},
})
script>
body>
1.6 v-if/v-else-if/v-else
与v-if同时使用，可以选择。
<body>
<div id="root">
<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>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
type:'A'
}
})
script>
body>
1.7 v-for
用来辅助开发者用一个数组来循环渲染一个列表结构，常用于item in items形式的特殊语法。
<body>
<div id="root">
<table>
<thead>
<th>索引th>
<th>idth>
<th>姓名th>
thead>
<tbody>
<tr v-for="(item,index) in list">
<td>{{index}}td>
<td>{{item.id}}td>
<td>{{item.name}}td>
tr>
tbody>
table>
div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
list: [
{ id: 1, name: '大头' },
{ id: 2, name: '小头' },
{ id: 3, name: '大腿' }
]
}
})
script>
body>
