vue
什么是Vue？
概念：Vue是一个构建用户页面的渐进式框架
Vue的两种使用方式
- Vue的核心开发 场景： 局部 {\color{red}局部} 局部模块改造
- Vue核心包& Vue插件 工程化开发场景： 整站 {\color{red}整站} 整站开发
Vue2官网
https://v2.cn.vuejs.org/
资料存放地址
D:\BaiduNetdiskDownload\2、最新Vue2+3 入门到实战课程
echarts官网
https://echarts.apache.org/zh/index.html
layui官网
http://layui.xhcen.com/
课件保留地址
D:\BaiduNetdiskDownload\2、最新Vue2+3 入门到实战课程
一、创建vue实例
1.创建html
2.引入vue依赖
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>创建一个Vue实例</title>
</head>
<body>
<!--创建Vue实例，初始化渲染1.准备容器（Vue所有管理的范围）2.引包(开发版本包/生产版本包)官网3.创建实例4.添加配置-》完成渲染
-->
<div id="app"><!--这里将来会编写用于渲染的代码逻辑 --><h1>{{ msg }}</h1><h2>{{name}}</h2><h3>{{age}}</h3>
</div><!-- 开发环境版本，包含了有帮助的命令行警告 (不可以写成：<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"/>)-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>//一旦引入了VueJS核心包，在全局环境下，就有了Vue构造函数const app = new Vue({//通过el配置选择器，指定Vue管理的是哪个盒子el: '#app',//通过data提供数据data: {msg:'Hello 黑马',name: 'lzp',age: 18}});
</script>
</body>
</html>
二、插值表达式
三、Vue响应特性
四、Vue指令
语法糖：
1、保留两位小数
2、document.querySelector(‘p’)
通过标签名选择元素，允许你通过提供一个 CSS 选择器来选择文档中的第一个匹配的元素。这个函数返回匹配的元素（如果找到了匹配项），否则返回
null。document.querySelector是一个非常有用的方法，因为它让你可以通过多种选择器轻松地选择和操作 DOM 元素。
value.slice(0, 1)，value.slice(1)：截取字符
v-html:设置元素的innerHTML，语法：v-html=“表达式”
v-show：控制元素的显示隐藏， t r u e : 显示， f a l s e ：隐藏 {\color{red}true:显示，false：隐藏} true:显示，false：隐藏，底层原理切换css的display：none来控制显示隐藏，使用场景，频繁切换显示隐藏的场景
v-if：控制元素的显示隐藏（条件渲染 t r u e : 显示， f a l s e ：隐藏 {\color{red}true:显示，false：隐藏}