番禺做网站公司,如何 html5 网站模板,电商店铺,丹东网站推广本文是我2年前做的一个学习小demo#xff0c;在这里分享一下 希望对想要学习Vue的小伙伴能有一丢丢的小帮助~_~
1 Vue CLI Vue CLI (opens new window)是一个基于Vue.js进行快速开发的完整系统。
这里我使用 Vue CLI 生成了一个Vue项目#xff0c;命令为#xff1a;vue cr… 本文是我2年前做的一个学习小demo在这里分享一下 希望对想要学习Vue的小伙伴能有一丢丢的小帮助~_~
1 Vue CLI Vue CLI (opens new window)是一个基于Vue.js进行快速开发的完整系统。
这里我使用 Vue CLI 生成了一个Vue项目命令为vue create 自定义项目名称生成的Vue项目目录结构如下【目录生成命令tree /f E:result.txt】
│ .gitignore 这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中
│ babel.config.js 项目范围配置
│ jsconfig.json 目录中存在jsconfig.json文件表示该目录是JavaScript项目的根目录
│ package.json 定义了项目的所有依赖包括开发时依赖和发布时依赖
│ README.md 说明文件
│ vue.config.js vue的一个配置文件
│ yarn.lock 作用是锁定唯一版本
├─node_modules 这个目录存放的是项目的所有依赖即 npm install 命令下载下来的文件
├─public
│ favicon.ico ico图标文件
│ index.html 项目的首页入口页也是整个项目唯一的HTML页面
│
└─src│ App.vue 是一个Vue组件也是项目的第一个Vue组件│ main.js 相当于Java中的main方法是整个项目的入口js│ ├─assets 用来存放资源文件│ logo.png 图片文件│ └─components 用来存放组件一些可复用非独立的页面HelloWorld.vue 项目自带的HelloWorld组件TodoItem.vue 自定义开发的组件示例2 组件中包含三部分内容
template
这里写的是html代码
/templatescript
这里写的是js代码
/scriptstyle
这里写的是css代码
如果style标签里加个scoped属性它表示style里面所写的css样式只会对本文件生效别的地方用是不好使的
/style3 源码示例
TodoItem.vue 这个是开发的一个单文件组件示例代码 !--这里写的是html代码 --
templateli classitem!-- checkbox复选框 --input typecheckbox v-modelyuan !-- slot是vue中的插槽插槽用于决定将所携带的内容插入到指定的某个位置 --!-- 通过插槽jialin将checkbox选中状态true或falsechecked值传递过去在App.vue的中使用了插槽v-slot:jialin --slot namejialin v-bind{yuan}/slot/li
/template!--这里写的是js代码 --
script
export default {props:[item],data(){return{// isCheck和input typecheckbox v-modelisCheck中的v-model进行双向绑定yuan:false,}}
}
/script!--这里写的是css代码加上scoped属性表示style里面所写的css样式只会对本文件中template模板中的html代码生效别的地方用是不好使的 --
style scoped.item {color: red;}
/styleApp.vue 这个是开发的一个单文件组件示例代码 !--这里写的是html代码 --
templateli classitem!-- checkbox复选框 --input typecheckbox v-modelyuan !-- slot是vue中的插槽插槽用于决定将所携带的内容插入到指定的某个位置 --!-- 通过插槽jialin将checkbox选中状态true或falsechecked值传递过去在App.vue的中使用了插槽v-slot:jialin --slot namejialin v-bind{yuan}/slot/li
/template!--这里写的是js代码 --
script
export default {props:[item],data(){return{// isCheck和input typecheckbox v-modelisCheck中的v-model进行双向绑定yuan:false,}}
}
/script!--这里写的是css代码加上scoped属性表示style里面所写的css样式只会对本文件中template模板中的html代码生效别的地方用是不好使的 --
style scoped.item {color: red;}
/styleApp.vue 这个是开发的一个单文件组件示例代码 !--这里写的是html代码 --
templatediv idapp{{msg}}!-- div代码块-start --div!-- input输入框输入的内容会赋值给info --input typetext v-modelinfo!-- button添加按钮鼠标单击事件v-on:click中定义了一个handleClick方法 --button refinputPosition v-on:clickhandleClick添加/button/div!-- div代码块-end --!-- ul代码块-start --ul!-- 通过v-for循环获取list数组中的内容每次获取内容以item变量输出 --todo-item v-forflm in list :keyflm!-- 通过v-slot:jialin插槽传递checkbox是否选中的对象,选中时itemProps.checkedtrue未选中时itemProps.checkedfalse --template v-slot:jialinitemProps!-- {{flm}}获取循环的内容 --span :style{fontSize:20px,color:itemProps.yuan?red:blue}{{flm}}/span/template/todo-item/ul!-- ul代码块-end --/div
/template!--这里写的是js代码 --
script
// 引用TodoItem组件
import TodoItem from ./components/TodoItem.vueexport default {name: app,//在这里初始化数据data(){return{msg:单文件组件,info:,list:[],}},//在这里编写方法methods:{//button按钮的单击事件方法handleClick(){if(this.info){alert(请先写点啥呗)return;}//向list数组中添加input框中输入的info内容this.list.push(this.info)//清空input框中输入的info内容this.info }},//在这里注册组件components: {TodoItem,}
}
/script!--这里写的是css代码 --
style/style4 最终运行效果 5 下载源码
下载源码https://github.com/fenglm2021/fenglm-vue-cli.git
