vue vue介绍特性介绍和快速使用
内容详细
1 前端介绍
# 1 HTML(5)、CSS(3)、JavaScript(ES5、ES6)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看
# javascript=ecmascript+dom+bom 2015年es6--》格式化字符串 ``
# 2 Ajax的出现 -> 后台发送异步请求，Render+Ajax混合
# 3 单用Ajax（加载数据，DOM渲染页面）：前后端分离的雏形
# 4.Angular框架的出现（1个JS框架）：出现了“前端工程化”的概念（前端也是1个工程、1个项目）
# 5 React、Vue框架：当下最火的2个前端框架（Vue：国人喜欢用，React：外国人喜欢用）
# 6 移动开发（Android+IOS） + Web（Web+微信小程序+支付宝小程序） + 桌面开发（Windows桌面）：前端 -> 大前端
# 移动端混合开发：原生+页面---》支付宝--》口碑
# 7 一套代码在各个平台运行（大前端）：谷歌Flutter（Dart语言：和Java很像）可以运行在IOS、Android、PC端
# 8 在Vue框架的基础性上 uni-app：一套编码 编到10个平台
https://uniapp.dcloud.io/case.html
# 9 在不久的将来 ，前端框架可能会一统天下
# html css（less，sass） js jq，bootstrap es6 webpack vue react 小程序开发 node git mongodb
2 vue介绍特性介绍
# vue介绍
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
可以一点一点地使用它，只用一部分，也可以整个工程都使用它
js的框架，跟jq是一类东西
bootstrap：ui框架不是js框架（css样式）
vue中使用ui可以引入bootstrap，elementui(饿了么团队出的)，Vant(移动端ui：有赞)，ant-design-vue（ant-design本身是react的ui库）
# 版本：
-主流：2.x
-最新：3.x
# 官方有教程：https://cn.vuejs.org/v2/guide/
# M-V-VM思想 ----》mvc，mtv，mvp：安卓分层架构
Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中，js中变量
View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）
ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）
以后不需要显示的使用dom操作，jquery的作用就不大了
# 组件化开发，单页面开发
-vue项目---》index.html页面---》看到的变化，都是组件的切换
-页面组件--》放了小组件
-在index.html中替换 组件，就实现页面的变化
3 快速使用vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app" class="div_cls">
<h1>我的名字是：{{name}}</h1>
<input type="text" v-model="text">
<hr>
{{text}}
</div>
</body>
<script>
// div(不一定是div) 被vue托管了，在div内部，就可以使用vue的语法：模板，指令系统
var vm =new Vue({
// el:"#app",
el:".div_cls",
data:{
name:"lqz",
text:""
}
})
</script>
</html>
# 在浏览器中打开调试---》console---》vm._data['name']="xxx"--->页面跟着变了
4 模板语法之插值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>用两个大括号包裹的叫插值,可以写js代码</h1>
<h3>{{name}}</h3>
<h3>{{age}}</h3>
<h3>{{list1}}</h3>
<h3>{{list1[0]}}</h3>
<h3>{{obj1.name}}</h3>
<h3>{{link1}}</h3>
<h3>{{1==1}}</h3>
<h3>三目运算符：{{10>20?'是':'否'}}</h3>
</div>
</body>
<script>
var vm =new Vue({
el:"#app",
data:{
name:"lqz",
age: 18, // 数值
list1: [1,2,3,4], // 数组
obj1: {name: 'lqz', age: 19}, // 对象
link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
}
})
</script>
</html>
# 插值可以放变量和少量js代码
5 指令系统之文本指令
v-xx属性都是vue的指令系统
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>文本指令--v-html-->会把变量的值渲染到标签中,如果字符串是标签，显示标签的样子</h1>
<p v-html="name"></p>
<p v-html="link1"></p>
<h1>文本指令--v-text-->会把变量的值渲染到标签中,如果字符串是标签，不会是标签，字符串原样显示</h1>
<p v-text="name"></p>
<p v-text="link1"></p>
<h1>文本指令--v-show-->控制标签是否显示:true和false，其实在页面中，但是不现实display:none</h1>
<div v-show="show">
我是div
</div>
<h1>文本指令--v-if-->控制标签是否显示:true和false，真正的标签不存在了，dom操作，性能低</h1>
<div v-if="show1">
我是div222
</div>
</div>
</body>
<script>
var vm =new Vue({
el:"#app",
data:{
name:'lqz',
link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>',
show:true,
show1:true,
}
})
</script>
</html>
6 指令系统之事件指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- <button v-on:click="handleClick">点我显示隐藏下面的div</button>-->
<button @click="handleClick">点我显示隐藏下面的div</button>
<div v-if="is_show">
我是div
</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
is_show: true,
},
methods: {
handleClick() {
// 把show的值取反,this代指vue对象，vm对象
this.is_show = !this.is_show
}
}
})
</script>
</html>
v-on:click='xx'
v-on: 可以简写成 @ 以后使用这个多
