Vue简介
2020-01-14 00:03
211 查看
vue: view 构建视图层(用户界面，等价于html页面)的渐进式框架；
框架和库的理解:
库：jquery.js / underscore.js / moment.js(日期处理库) / echarts.js
本质是一堆函数的集合，每次调用一个函数，实现一个特定的功能
框架：vue.js / react.js / angular.js
是一整套完整的解决方案，使用框架的时候，需要将代码放置到某个特定范围内，框架会自动渲染当前的代码。
即，框架有自己的编程方式，我们按照一定的规则或者语法编写代码
区别：
1.使用库的时候，很自由，只需要调用js库提供的各式各样的方法即可，
2.使用框架的时候，需要按照框架的规则或者语法编写代码，限制会比较多，但同时功能比较强大，可以提升开发的效率
vue语法:
使用{{ }} 编写内容， 类似于ejs.js, <% %>
内容可以是变量，字符串，数字或者 四则运算等；
[code]<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> vue简易了解 </title>
<script src="vue.js"></script>
</head>
<body>
<div id="demo">
{{ msg }}
<p> {{ "普通的字符串" }} </p>
<p> {{ 88 }} </p>
<p> {{ 88 * 88 }} </p>
<p> {{ obj }} </p>
</div>
<h2> {{ msg }} </h2>
<script>
// 使用vue的步骤
// 1. 确定框架的使用范围，即创建框架所挂载的标签 <div id=demo>
// 2. 创建实例化的vue，并设置vue的相关属性
// 全局环境中，this指向window对象
console.log(this);
console.log(typeof Vue); // function
// 创建实例化vue，指定属性el和data
var vue = new Vue({
el: '#demo', // element元素/标签，设置vue实例所在的标签，标签范围就是实例使用范围，值是id
data: { // 设置vue中的变量数据
msg: "这是变量",
obj: {
name: '张三',
age: 19
}
}
});
</script>
</body>
</html>
- 点赞
- 收藏
- 分享
- 文章举报
洪布斯
发布了82 篇原创文章 · 获赞 1 · 访问量 1102
私信
关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 