win7 iis设置网站首页,中国人才网,山东广播电视台,wordpress不能发邮件vue 什么是Vue? 概念:Vue是一个构建用户页面的渐进式框架 Vue的两种使用方式 Vue的核心开发 场景: 局部 {\color{red}局部} 局部模块改造Vue核心包 Vue插件 工程化开发场景: 整站 {\color{red}整站} 整站开发Vue2官网 https://v2.cn.vuejs.org/ 资料存放地址 D:\Baidu…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"
headmeta 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 }}/h1h2{{name}}/h2h3{{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:隐藏}