❤️ 目录
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>
<!-- 引入vue -->
<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">
<!-- v-text的使用 -->
<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">
<!-- v-html的使用 -->
<h1 v-h<!-- 准备一个容器 -->tml="info"></h1>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
info:'<h3 style="color: pink; font-weigt: bold;">一起学习vue.js</h3>'
}
})
</script>
</body>
1.3 v-on
v-on是一个事件绑定指令,用来辅助程序员绑定事件监听
<body>
<div id="root">
<p>count的值是: {
{count}}</p>
<!-- v-on的使用 -->
<button v-on:click="add">+1</button>
<!-- v-on:的简写@ -->
<button @click="add">+1</button>
</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">
<!-- v-bind的使用 -->
<input type="text" v-bind:placeholder="tips">
<!-- v-bind:的简写: -->
<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">
<!-- v-if的使用 -->
<p v-if="flag">大头</p>
<!-- v-show的使用 -->
<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>id</th>
<th>姓名</th>
</thead>
<tbody>
<!-- v-for的使用 -->
<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>