Vue简单入门
Vue.js是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
学习Vue之前需要了解的知识:
- Html
- Css
- JavaScript
- Ajax
导入vue
导入vue有很多种方式包括
1、js文件引入:
可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script>
标签引入
2、使用CDN方法引入(二选一即可,入门建议使用开发环境版本):
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Hello World!
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 渲染data中的message(插值)-->
{{ message }}
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",//挂载点,这里挂载至id为app的div
data: {
message: "Hello World"
}
})
</script>
</body>
</html>
运行结果:
挂载点可以为父级元素,子元素也可以渲染Vue实例化对象的数据、方法等等
这里挂载至父级元素id为app的<div>
上,并将数据渲染在子元素<p>
内,且修改上述例子message的值时,页面也会同步进行数据改变:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 渲染data中的message(插值)-->
<p>{{ message }}</p>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello Vue"
}
})
</script>
</body>
</html>
运行结果:
v-text指令
利用v-text指令可以进行数据绑定到标签上,但是无论标签内数据是什么都会被覆盖
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app" v-text="age">
<!-- 已渲染data中的message(插值),但由于在div中使用了v-text指令,message被覆盖-->
{{ message }}
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello World",
age: 14
}
})
</script>
</body>
</html>
运行结果:
后续还会接着有更新哈,有兴趣的可以一起来学习,初学者做个记录,有错误的地方麻烦大神指教。