一、Vue js的简介
1.Vuejs目前十分火，是前端必备的一个技能
2.Vue 的简单介绍（读音类似view）
-
Vues是一个构建用户界面的渐进式框架，可以将Vue作为应用的一部分嵌入其中，带来更丰富的交互体验。
-
业务逻辑使用Vue实现，核心库以及其生态系统
-
解耦视图和数据
-
可复用的组件
-
前端路由技术
-
状态管理
-
虚拟DOM
-
具备一定的HTML\CSS\JS基础
二、Vue js的安装
1.方式一：直接CDN引入
2.方式二：下载和引入
- 开发环境 https://cn.vuejs.org/v2/guide/installation.html
- 生产环境
-
(1)在开发版本中右键目标另存为存Vue的文件
-
(2)下载WebStorm
-
(3)新建一个项目，并将下载的Vue文件导入进来
三、Vue初体验——hello Vue
1.定义let、const
- let定义变量 const定义常量在es6中（不使用Var）
let name = “why”;
const app = new Vue;
2.hello vue的编程实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">{{message}}</div>
<script src="../js/vue.js"></script>
<script>
const app =new Vue({
el: '#app',/*用于挂载要管理的元素*/
data:{ //定义数据
message:'你好啊，李银河！'
}
})
</script>
</body>
</html>
- 与js的区别
js实现hello word是通过命令是编程范式实现的
1.创建div元素，设置id属性
2.定义一个变量叫message
3.将message变量放到前面的div元素中显示
Vue 的编程式范式是声明式，VUE管理元素模式
- Mustache语法
{{message}}
v-once或{{*message}} //一次性地插值
{{{message}}} //会解析里面的html标签
- 声明式编程范式的优点
数据界面完全分离
数据在date里处理，界面在div里处理
-
Vue的响应式
-
代码做了什么事情?
-
我们来阅读JavaScript代码,会发现创建了一个Vue对象。
-
创建Vue对象的时候,传入了一些options:{}
{}中包含了el属性:该属性决定了这个Vue对象挂载到哪一个元素上,很明显,我们这里是挂载到了id为ap的元素上
{}中包含了data属性:该属性中通常会存储一些数据
这些数据可以是我们直接定义出来的,比如像上面这样。
也可能是来自网络,从服务器加载的。
扫一扫
558
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
