一、vue是什么
官方解释:vue是一套用于构建用户界面的渐进式框架。
vue是一个js框架,提供了一套开发规则,按照这个开发规则可提高开发效率。
补充:渐进式意思是,vue.js本身功能局限,一旦配合其他的工具可以增强其能力。
- vue-router
- vuex
- axios
- nuxt
二、vue的核心
①数据驱动视图(页面)
修改绑定的数据(页面上依赖数据),就能对应的更新视图(页面),极大的解放了操作dom的工作,提供开发效率。
②MVVM模式
- M 数据模型 model
- V 视图(页面)view
- VM数据模型和视图的控制器 viewmodel
- 数据双向绑定
③组件化开发
通常一个应用会以一颗嵌套的组件树的形式来组织
把页面按照页面功能(导航,侧边栏,下拉框)拆分业务,每一个组件时一个独立的功能,提供代码可维护性,和复用性。
三、vue使用
hello vue
<!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>
</head>
<body>
<div id="app">
<h1>{
{msg}}</h1> <!-- 插值语法-->
</div>
<!-- 引入 -->
<script src="./vue2.js"></script>
<script>
// 实例化vue
let vm = new Vue({
// vue的选项,el选项的作用指定vue实例管理的容器
el:'#app',
// vue选项,data作用是声明响应式数据
data:{
msg:'hello vue'
}
})
</script>
</body>
</html>
页面显示:
四、vue-指令
1.v-text和v-html
v-text:更新替换标签内容,文本;v-html更新替换标签内容,html
<!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>
</head>
<body>
<div id="app">
<h1 v-text="text"></h1>
<h1 v-html="html"></h1>
</div>
<!-- 引入 -->
<script src="./vue2.js"></script>
<script>
// 实例化vue
let vm = new Vue({
// vue的选项,el选项的作用指定vue实例管理的容器
el:'#app',
// vue选项,data作用是声明响应式数据
data:{
text:'v-text:<span>hello vue</span>',
html:'v-html:<span>hello vue</span>'