危机公关处理方案,网站的seo方案,图库网站模板,做网站的空间是啥1.vue课程简介
1.VUE是#xff1a;一套用于构建用户界面的渐进式JavaScript框架 渐进式#xff1a;Vue 可以自底向上逐层的应用
#xff08;简单应用#xff1a;只需要一个轻量小巧的核心库
复杂应用#xff1a;可以引入各式各样的Vue插件#xff09;
vue-cli脚手架,…1.vue课程简介
1.VUE是一套用于构建用户界面的渐进式JavaScript框架 渐进式Vue 可以自底向上逐层的应用
简单应用只需要一个轻量小巧的核心库
复杂应用可以引入各式各样的Vue插件
vue-cli脚手架,专门做工程化开发
vue-router用于在Vue中实现前端路由
vuex可以保管复杂应用的数据
element-ui是一个组件库
2.vue简介
2.Vue的特点
1采用组件化模式提高代码复用率切让代码更好维护
在Vue里面一个.vue文件就包含了HTML、CSS、javascript三种类型文件的交互
一个Vue文件就是一个组件可以通过引用一个Vue文件把htmlcss\javascript都引用过去 2声明式代码让编码人员无需直接操作DOM提高开发率
命令式编码一步一步来少了任何一步都不行就是JS课程里面学的那样每一步都不能少
{{p.id}}-{{p.name}} - {{p.age}} 3.使用虚拟DOM优秀的Diff 算法尽量复用DOM节点 下面是用新修改增加了的东西加原来存在的东西的东西全部替换旧的东西增加了没有必要的替换有的东西原来就存在结果删了又重新都写了一遍 Vue实现依旧存在的东西依然保持不变只增加新增的东西提高了复用率在JS课程里面也讲过新增部分和替换全部旧的东西的课程
vue的实现多了的东西就是虚拟DOM然后再把虚拟DOM变成真实DOM 3.VUE使用指南
在公司了工作需要使用脚手架,叫做Vue CLI,不会再使用低级的东西
在Vue.js官网有使用指南 在”学习“里面有两个重要的东西”教程“、”API“ 4.搭建Vue开发环境
不推荐新手使用脚手架 VUE CLI 为了使得在线资源加载的更快有时候会做CDN的加速 5.Hello小案例
!DOCTYPE html html head meta charsetutf-8 title 初识Vue /title !--引入Vue-- !--如果引入Vue全局就多了Vue的构造函数-- script typetext/javascript src./js/vue.js/script style /style /head body !--准备一个容器-- div idroot h1Hello,{{name}}/h1!--两组花括号为分隔符-- /div !--关闭提示-- script typetext/javascript Vue.config.productionTipfalse;//阻止Vue在启动时生成生产提示 //创建Vue实例 const xnew Vue({ el:#root, //el用于指定当前Vue实例为哪个容器服务值通常为CSS选择器字符串 //让它选择器让它自己找这个写法更经典 /*el:document.getElementById(root)//亲自找到一个元素给它配置到el里面*/ data:{ //data中用于存储数据数据供el所指定的容器去使用 name:Linying } }) /script /body /html 容器的作用是提供模板和让vue知道值往哪里放 6.hello案例解析实例和容器之间只能一对一
多对一一个数据只能给一个空里面填 一对多
!DOCTYPE html html head meta charsetutf-8 title 初识Vue /title !--引入Vue-- !--如果引入Vue全局就多了Vue的构造函数-- script typetext/javascript src./js/vue.js/script style /style /head body !--准备一个容器-- div idroot h1Hello,{{name}},{{address}}/h1!--两组花括号为分隔符-- /div !--关闭提示-- script typetext/javascript Vue.config.productionTipfalse;//阻止Vue在启动时生成生产提示 //创建Vue实例 const xnew Vue({ el:#root, //el用于指定当前Vue实例为哪个容器服务值通常为CSS选择器字符串 //让它选择器让它自己找这个写法更经典 /*el:document.getElementById(root)//亲自找到一个元素给它配置到el里面*/ data:{ //data中用于存储数据数据供el所指定的容器去使用 name:Linying } }) new Vue({ el:#root, //el用于指定当前Vue实例为哪个容器服务值通常为CSS选择器字符串 //让它选择器让它自己找这个写法更经典 /*el:document.getElementById(root)//亲自找到一个元素给它配置到el里面*/ data:{ //data中用于存储数据数据供el所指定的容器去使用 address:Yabing } }) /script /body /html 只能是一对一的关系
!DOCTYPE html html head meta charsetutf-8 title 初识Vue /title !--引入Vue-- !--如果引入Vue全局就多了Vue的构造函数-- script typetext/javascript src./js/vue.js/script style /style /head body !--准备一个容器-- div idroot h1Hello,{{name}},{{address}}/h1!--两组花括号为分隔符-- /div div idroot2 h1Hello,{{name}},{{address}}/h1!--两组花括号为分隔符-- /div !--关闭提示-- script typetext/javascript Vue.config.productionTipfalse;//阻止Vue在启动时生成生产提示 //创建Vue实例 const xnew Vue({ el:#root, //el用于指定当前Vue实例为哪个容器服务值通常为CSS选择器字符串 //让它选择器让它自己找这个写法更经典 /*el:document.getElementById(root)//亲自找到一个元素给它配置到el里面*/ data:{ //data中用于存储数据数据供el所指定的容器去使用 name:Linying, address:XinZhou } }) new Vue({ el:#root2, //el用于指定当前Vue实例为哪个容器服务值通常为CSS选择器字符串 //让它选择器让它自己找这个写法更经典 /*el:document.getElementById(root)//亲自找到一个元素给它配置到el里面*/ data:{ //data中用于存储数据数据供el所指定的容器去使用 name:Yabing, address:YunCheng } }) /script /body /html v-bind:可以简写为: 头标签和尾标签之间夹着的内容就是标签体红色框里面圈起来的都是标签属性。
标签体中可以用插值语法 7.模板语法{{}}
链接大写和当前时间的时间戳 加了才会当做JS表达式去执行不加就是最传统的字符串 如果有两个name的值对应{{name}}那么会以后面的那个为准 解决方法设计为多级的结构 8.数据绑定
v-bind单向数据绑定v-model双向数据绑定
v-bind最大的特点是数据绑定 只有一个元素有valuev-model才可以工作
普通写法和简写
v-model默认收集的就是value值所以v-model可以省略value !DOCTYPE html html head meta charsetutf-8 title 初识Vue /title !--引入Vue-- !--如果引入Vue全局就多了Vue的构造函数-- script typetext/javascript src./js/vue.js/script style /style /head body !--准备一个容器-- div idroot !--br/表示换行-- 单项数据绑定:input typetext v-bind:valuenamebr/ 双向数据绑定:input typetext v-model:valuenamebr/ h2 v-bind:xv-bind你好啊/h2 !--h2 v-model:xv-bind你好啊/h2 这个代码是错误的因为v-model只能应用在表单类元素输入类元素上 输入类元素有input 单选框 多选框 select 多行输入 -- /div /body !--关闭提示-- script typetext/javascript Vue.config.productionTipfalse;//阻止Vue在启动时生成生产提示 //创建Vue实例 new Vue({ el:#root, //el用于指定当前Vue实例为哪个容器服务值通常为CSS选择器字符串 //让它选择器让它自己找这个写法更经典 /*el:document.getElementById(root)//亲自找到一个元素给它配置到el里面*/ data:{ //data中用于存储数据数据供el所指定的容器去使用 name:尚硅谷 } }) /script /html 9.el和data的两种写法
value实例对象
所有带$符号的是给程序员用的所有不带$符号的都不是给程序员用的 v是实例Vue是实例缔造者 !DOCTYPE html html head meta charsetutf-8 title 初识Vue /title !--引入Vue-- !--如果引入Vue全局就多了Vue的构造函数-- script typetext/javascript src./js/vue.js/script style /style /head body !--准备一个容器-- div idroot h1你好{{name}}/h1 /div /body !--关闭提示-- script typetext/javascript Vue.config.productionTipfalse;//阻止Vue在启动时生成生产提示 //创建Vue实例 const vnew Vue({ el:#root, data:{ name:尚硅谷 } }) console.log(v) /script /html 总结 !DOCTYPE html html head meta charsetutf-8 title 初识Vue /title !--引入Vue-- !--如果引入Vue全局就多了Vue的构造函数-- script typetext/javascript src./js/vue.js/script style /style /head body !--准备一个容器-- div idroot h1你好{{name}}/h1 /div /body !--关闭提示-- script typetext/javascript Vue.config.productionTipfalse;//阻止Vue在启动时生成生产提示 //创建Vue实例 const vnew Vue({ /* el:#root,*/ //data的第一种写法对象式 data:{ name:尚硅谷 } //data的第二种写法函数式 /* data的属性是一个函数是Vue帮调用的 data:function(){ console.log(,this) //此处的this是Vue实例对象 return{ name:尚硅谷 } } */ /*简写为: data(){ console.log(,this) //此处的this是Vue实例对象 return{ name:尚硅谷 } } */ }) //el的两种写法 //不用el用$也可以指定容器 /*两种方式都可以指定容器但是第二种灵活一点儿*/ console.log(v) v.$mount(#root)//$mount 挂载 /*setTimeout((){ v.$mount(root) },1000); 意思是等一秒才会执行 */ /script /html 10.理解MVVM !DOCTYPE html html head meta charsetutf-8 title 初识Vue /title !--引入Vue-- !--如果引入Vue全局就多了Vue的构造函数-- script typetext/javascript src./js/vue.js/script style /style /head body !--准备一个容器-- div idroot h1学校名称:{{name}}/h1 h1学校地址:{{address}}/h1 /div /body !--关闭提示-- script typetext/javascript Vue.config.productionTipfalse//阻止Vue在启动时生成生产提示 //创建Vue实例 new Vue({ el:#root, data:{ name:尚硅谷, address:北京 } }) /script /html 出现在Vue原型上的东西它都能用
