一、Vue
–1,概述
是一个轻量级的前端框架.封装了HTML CSS JS的代码.
特点:
1, 是一个轻量级的 渐进式的框架, 按需配置
2, 实现了数据驱动/双向绑定 和 组件化的思想(高内聚)
3, vue框架可以避免了DOM的API
4, 遵循了MVVM设计模式,实现前端代码的松耦合
M是Model,是指数据
V是View,是指视图
VM是ViewModel,是指在指定视图里渲染指定数据
-2,官网
https://cn.vuejs.org/ #官网
https://cdn.jsdelivr.net/npm/vue/dist/vue.js #下载最新版本
-3,MVVM框架
简而言之,MVVM框架实现了页面和数据的分离,代码结构更加清晰,责任更加明确,同时实现自动化,数据变化,页面随之变化,无需写代码,非常棒的一个改进。这是javascript、jquery、bootstrap等无法做到的,也是前端为何开始推崇Vue这些框架的根本原因,也标示着jquery的终结。
二,入门案例
1.把vue.js导入到你的项目中
2.创建HTML文件,并引入vue.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 1.引入vue.js来用vue框架的功能
src用来指定js文件的位置-->
<script src="vue.js"></script>
</head>
<body>
<!-- 2. 数据渲染区,准备解析vue的数据
{
{message}}是插值表达式,用来获取message-->
<div id="app">{
{message}}</div>
<!-- 3.给第二步准备数据,js代码 -->
<script type="text/javascript">
//方式一:
/* var a={
message:"hello vue"
}
//1.创建Vue对象
new Vue({
//element的简称,挂载点,意思是把数据挂载到指定位置
el:"#app",//利用css的id选择器,选中了网页中的元素
//data是vue为挂载点准备好的数据
data:a
}); */
//方式二:
new Vue({
el:"#app",
data:{message:"hello vue"}
})
</script>
</body>
</html>
3.测试
4.练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 1.引入vue.js文件 -->
<script src="vue.js"></script>
<body>
<!-- 2.准备数据渲染区 插值表达式获取属性的值-->
<div id="app">
姓名:{
{name}}
年龄:{
{age}}
</div>
<!-- 3.创建Vue对象 -->
<script type="text/javascript">
new Vue({
el:"#app",
data:{
name:"jack",
age:12
}
})
</script>
</body>
</html>
三、Vue的基础语法
–1,运算符&函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 1.引入vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<!-- 2.准备数据渲染区, -->
<div id="app">
<p>加法:{
{2+3}}</p>
<p>减法:{
{2-3}}</p>
<p>乘法:{
{2*3}}</p>
<p>除法:{
{3/2}}</p>
<p>取余:{
{10%2}}</p>
<p>三元运算符:{
{age>18?"成年人":"未成年"}}</p>
<p>字符串的常见操作:{
{str}} {
{str.length}}</p>
调用函数:{
{show()}} {
{print(100)}} {
{add(1,2)}}
</div>
<!-- 3.创建Vue对象 --&g