Vue基础入门
Posted IT-老牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue基础入门相关的知识，希望对你有一定的参考价值。
文章目录
引言
Vue 是一款渐进式 javascript 框架，用来动态构建用户界面。
○ 遵循 MVVM 模式
○ 编码简洁、体积小、运行效率高，适合移动/PC 端开发。
○ 本身只关注UI，可以轻松引入 vue 插件或其它第三库开发项目。
○ 国内大规范使用、生态系统完善。
● 官网地址：
○ https://cn.vuejs.org/
● 作者: 尤雨溪。
● 框架下载：
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
1.快速入门
1.1.创建项目
新建 html 页面，引入 Vue.js文件
<script src="js/vue.js"></script>
1.2.模型和视图
Model
<script>
<!-- 模型 -->
new Vue(
el: '#app',
// data:
// name: '尤雨溪',
// message: 'Hello Vue'
//
// ES6 语法
data()
return
name: '尤雨溪',
message: 'Hello Vue'
)
</script>
View
<!-- 视图 -->
<div id="app">
<p>name</p>
<p>message</p>
<input type="text" v-model="message">
</div>
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
</head>
<body>
<!-- 视图 -->
<div id="app">
<p>name</p>
<p>message</p>
<input type="text" v-model="message">
</div>
<script src="js/vue.js"></script>
<script>
<!-- 模型 -->
new Vue(
el: '#app',
// data:
// name: '尤雨溪',
// message: 'Hello Vue'
//
// ES6 语法
data()
return
name: '尤雨溪',
message: 'Hello Vue'
)
</script>
</body>
</html>
运行效果：
1.3.双向数据绑定
MVVM (Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。
jQuery 是将关注点放在了 DOM 操作上；先回顾下MVC:
MVC 只能实现模型到视图的单向展示。
双向绑定是指当数据模型数据发生变化时，页面展示的内容会随之发生变化，而如果表单数据发生变化，绑定的模型数据也随之发生变化。MVVM 如下图：
Model 和 View 是通过 ViewModel 对象进行双向绑定的。模型数据发生变化，会更新到视图，视图内容变化，也会更新模型数据。
2. - 插值
2.1.语法
● 中可以插入文本，上面的案例就是；
● 中可以插入JavaScript 表达式；
number + 1
ok ? 'YES' : 'NO'
● 中只支持表达式，不支持其它语句；
<!-- 这是语句，不是表达式 -->
var a = 1
<!-- 流控制也不会生效，请使用三元表达式 -->
if (ok) return message
2.2.案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插值</title>
</head>
<body>
<div id="app">
message</br>
number + 1 </br>
ok ? 'YES' : 'NO' </br>
<!-- var a = 1 </br>-->
<!-- 流控制也不会生效，请使用三元表达式 -->
<!-- if (ok) return message </br>-->
</div>
<script src="js/vue.js"></script>
<script>
new Vue(
el: '#app',
data()
return
message: 'Hello Vue!!!',
number: 100,
ok: false
)
</script>
</body>
</html>
3.v-text、v-html（内容绑定）
● 可以用在 div、p、span、a、h1-h6 等有内容的标签上，为标签插入内容；
● v-text 插入普通文本
● v-html 插入 HTML 代码片段
3.1 语法
<标签 v-text="标签内容"></标签>
<标签 v-html="标签内容"></标签>
3.2 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插值和属性绑定</title>
</head>
<body>
<div id="app">
书名：<span v-text="book.name"></span> <br>
作者：<span v-text="book.author"></span> <br>
内容：<span v-text="book.content"></span> <br>
----------------------------------------------
<span v-html="book.content"></span> <br>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
new Vue(
el: '#app',
data()
return
book:
name: '三体',
author: '刘慈欣',
content: '<p>此处省略一万字....</p>'
;
)
</script>
4.v-bind (属性绑定)
4.1 语法
● 、v-text、v-html 语法不能作用在 HTML 标签的属性上；
● v-bind 指令可以用于响应式地更新 HTML 标签的属性。
<标签 v-bind:属性名称="属性值"></标签>
<!--使用缩写-->
<标签 :属性名称="属性值"></标签>
4.2 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性绑定</title>
</head>
<body>
<div id="app">
<a v-bind:href="url">百度</a> | <a :href="url">百度</a>
<span :title="tit">大家好</span>
</div>
<script src="js/vue.js"></script>
<script>
new Vue(
el: '#app',
data()
return
url: 'https://www.baidu.com',
tit : 'Hello Vue'
)
</script>
</body>
</html>
5.v-on（事件监听 ）
● 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
5.1 语法
<!-- 完整语法 -->
<标签 v-on:click="doSomething">...</标签>
<!-- 缩写 -->
<标签 @click="doSomething">...</标签>
5.2.案例
案例一
基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件监听</title>
</head>
<body>
<div id="app">
点击次数：count
<button v-on:click="count++">点击</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue(
el:"#app",
data()
return
count: 0
);
</script>
</body>
</html>
案例二
许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。
因此 v-on 还可以接收一个需要调用的函数名称。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
</head>
<body>
<div id="app">
点击次数:count
<button v-on:click="count++">点击</button>
<button @click="add" :disabled="disabled">点击我</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue(
el: '#app',
data()
return
count: 0,
disabled: false
,
methods:
// add: function ()
// if (this.count >= 5)
// this.disabled = true;
// else
// this.count++
//
//
add()
if (this.count >= 5)
this.disabled = true;
else
this.count++
)
</script>
</body>
</html>
案例三
除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：
<div id="app">
hello name ! <br>
<button @click="say('jack')">点击</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue(
el: '#app',
data:
name: ''
,
methods:
say(name)
this.name = name;
);
</script>
案例四
阻止默认事件，以表单提交为例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止默认事件</title>
</head>
<body>
<div id="app">
<form v-on:submit.prevent action="https://www.baidu.com" method="post">
<button type="submit">提交</button>
</form>
<form以上是关于Vue基础入门的主要内容，如果未能解决你的问题，请参考以下文章