网站怎么做视频背景,电脑上怎么下载字体到wordpress,教育培训类网站开发,个人视频网站怎么做Vue2 学习第一天
1. 什么是 vue?
Vue 是一套用于构建用户界面的渐进式框架。
2. vue 历史
vue 是在 2013 年创建的#xff0c;vue3 是 2020 出现的#xff0c;现在主要是用 vue2#xff0c;创新公司用的是 vue3
vue 的作者是尤雨溪#xff0c;vue 的搜索热度比 react…Vue2 学习第一天
1. 什么是 vue?
Vue 是一套用于构建用户界面的渐进式框架。
2. vue 历史
vue 是在 2013 年创建的vue3 是 2020 出现的现在主要是用 vue2创新公司用的是 vue3
vue 的作者是尤雨溪vue 的搜索热度比 react 更高国内 vue 用的人更多国外的用 react 多。
3. vue 学习的内容 注标黄是学习的内容 今天学习常用指令事件生命周期计算属性watch 4. Vite 构建 Vue 项目
在 cmd 中输入以下代码构建 vue 项目。
pnpm create vue2cd vue_demo //进入vue_demo文件夹
pnpm install //下载相关的依赖包下载别人写的代码
pnpm dev //打开终端进入网页小 tips如果下载很慢可以用 ctrlc 进行中断重下也可以切换淘宝源来下载。 在终端输入**pnpm dev**打开终端 以下是 vue 的目录结构介绍 可以下载vetur插件可以进行代码提示。 5. Vite 配置文件说明
import legacy from vitejs/plugin-legacy;
import vue2 from vitejs/plugin-vue2;的含义这里是代替了src路径。
6. main.js 文件说明
// import 就是引入文件
import Vue from vue;
// App是我们的根组件
import App from ./App.vue;
import ./assets/main.css;// h函数就是帮助我们渲染页面的函数
new Vue({el: #app,render: (h) h(App),
});7. Vue 文件总结
vue 文件主要由template、script和style组成。
templatediv/div
/templatescript
export default {name: ,
};
/scriptstyle scoped/styletemplate 模板用法 template 是我们的视图可以在里面写 html templatediv/div
/template绑定事件 click叫做指令 v-on:click 是 v-on 的简写 v-on的意思就是触发一个事件 使用**v-on:xxx**或 **xxx**绑定事件其中 xxx 是事件名addNum就是具体的事件函数。 button clickaddNum1/button大胡子语法 {{ }}大胡子语法大胡子里面可以放我们data中的变量 span{{ num }}/spandata 数据源 data 是我们的数据源vue 会对 data添加监听能够监听到 data 中数据的变化然后触发视图更新data 写法比较奇怪是一个函数函数返回一个对象对象中的数据才是我们的数据源 export default {data() {return {num: 0,};},methods 配置函数 methods 就是我们的事件处理中心所有的函数都放在里面methods 中配置的函数不要用箭头函数否则 this 就不是 vm 了methods 中配置的函数都是被 Vue 所管理的函数this 的指向是vm或组件实例对象 methods: {addNum() {console.log(this);this.num;},},整体 vue 文件 templatediv idtestbutton clickaddNum1/buttonspan{{ num }}/span/div
/templatescript
export default {data() {return {num: 0,};},methods: {addNum() {console.log(this);this.num;},},
};
/scriptstyle
#test {margin: auto;
}
/style8. v-if 条件渲染 v-if 写法 v-if表达式 v-else-if表达式 v-else表达式 适用于切换频率较低的场景。 特点直接通过删除 DOM 元素来控制显隐。 注意v-if可以和v-else-if、v-else一起使用但要求结构不能被“打断”。 v-show 写法v-show表达式适用于切换频率较高的场景。特点不展示的 DOM 元素未被移除仅仅是使用样式**display:none**隐藏掉 v-if 和 v-show 的区别 需要频繁操作 DOM 元素显隐的时候用 v-show 性能会更好使用v-if的时元素可能无法获取到而使用v-show一定可以获取到。 templatediv idwrapperbutton v-on:clicktoggletoggle/buttonp v-ifisShowhello world/p/div
/templatescript
export default {data() {return {isShow: true,};},methods: {toggle() {this.isShow !this.isShow;},},
};
/scriptstyle/style
