
Vue基础入门学习
发布日期:2021-05-09 04:59:18
浏览次数:9
分类:博客文章
本文共 9720 字,大约阅读时间需要 32 分钟。
vue安装
下载地址
https://cn.vuejs.org/v2/guide/installation.html
版本选择
选择开发版本下载
如何引入
直接用 <script> 引入,直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量。
Vue入门程序
Vue入门程序 {{msg}}
Vue中的属性绑定和双向数据绑定
Vue中的属性绑定和双向数据绑定 hellow world !{{content}}
小结
使用v-bind做属性绑定,其中title是vue实例中的变量对象
可简写为:title即:冒号+属性名称,如::+title
属性绑定语法:使用:+属性名称
双向数据绑定语法:使用v-model="vue中的变量对象名称"
Vue中的计算属性和侦听器
Vue中的计算属性和侦听器 姓 名{{fullName}}{{count}}侦听器值得是监听某个数据的变化,一旦变化就可以在监听方法了,做业务逻辑 计算属性computed,指的是他是有其他属性经过运算而来,即新的结果
侦听器值得是监听某个数据的变化,一旦变化就可以在监听方法了,做业务逻辑
计算属性computed,指的是他是有其他属性经过运算而来,即新的结果
v-if, v-show与v-for指令
v-if, v-show与v-for指令 {{content}}
- {{item}}
- {{item}}
v-if
有移除元素标签的效果,控制dom的存在与否
v-show
控制dom的显示与否,元素显示或隐藏
v-for
控制一组数据,控制一组数据,通过控制一组数据来循环显示一组数据的dom结构
todolist功能开发
todolist功能开发
- {{item}}
todolist组件拆分
todolist组件拆分
todolist的删除功能
实现todolist的删除功能
C:\Users\ASUS>cnpm install --global vue-cliDownloading vue-cli to E:\Program Files\nodejs\node_modules\vue-cli_tmpCopying E:\Program Files\nodejs\node_modules\vue-cli_tmp\_vue-cli@2.9.6@vue-cli to E:\Program Files\nodejs\node_modules\vue-cliInstalling vue-cli's dependencies to E:\Program Files\nodejs\node_modules\vue-cli/node_modules[1/20] commander@^2.9.0 installed at node_modules\_commander@2.20.3@commander[2/20] multimatch@^2.1.0 installed at node_modules\_multimatch@2.1.0@multimatch[3/20] ora@^1.3.0 installed at node_modules\_ora@1.4.0@ora[4/20] consolidate@^0.14.0 installed at node_modules\_consolidate@0.14.5@consolidate[5/20] rimraf@^2.5.0 existed at node_modules\_rimraf@2.7.1@rimraf[6/20] minimatch@^3.0.0 installed at node_modules\_minimatch@3.0.4@minimatch[7/20] async@^2.4.0 installed at node_modules\_async@2.6.3@async[8/20] semver@^5.1.0 installed at node_modules\_semver@5.7.1@semver[9/20] tildify@^1.2.0 installed at node_modules\_tildify@1.2.0@tildify[10/20] uid@0.0.2 installed at node_modules\_uid@0.0.2@uid[11/20] user-home@^2.0.0 installed at node_modules\_user-home@2.0.0@user-home[12/20] read-metadata@^1.0.0 installed at node_modules\_read-metadata@1.0.0@read-metadata[13/20] chalk@^2.1.0 installed at node_modules\_chalk@2.4.2@chalk[14/20] validate-npm-package-name@^3.0.0 installed at node_modules\_validate-npm-package-name@3.0.0@validate-npm-package-name[15/20] coffee-script@1.12.7 existed at node_modules\_coffee-script@1.12.7@coffee-script[16/20] inquirer@^6.0.0 installed at node_modules\_inquirer@6.5.2@inquirer[17/20] metalsmith@^2.1.0 installed at node_modules\_metalsmith@2.3.0@metalsmith[18/20] download-git-repo@^1.0.1 installed at node_modules\_download-git-repo@1.1.0@download-git-repo[19/20] handlebars@^4.0.5 installed at node_modules\_handlebars@4.5.3@handlebars[20/20] request@^2.67.0 installed at node_modules\_request@2.88.0@requestdeprecate metalsmith@2.3.0 › gray-matter@2.1.1 › coffee-script@^1.12.4 CoffeeScript on NPM has moved to "coffeescript" (no hyphen)All packages installed (239 packages installed from npm registry, used 13s(network 13s), speed 407.65kB/s, json 223(445.52kB), tarball 4.55MB)[vue-cli@2.9.6] link E:\Program Files\nodejs\vue@ -> E:\Program Files\nodejs\node_modules\vue-cli\bin\vue[vue-cli@2.9.6] link E:\Program Files\nodejs\vue-init@ -> E:\Program Files\nodejs\node_modules\vue-cli\bin\vue-init[vue-cli@2.9.6] link E:\Program Files\nodejs\vue-list@ -> E:\Program Files\nodejs\node_modules\vue-cli\bin\vue-listC:\Users\ASUS>cnpm install --global vue-cliDownloading vue-cli to E:\Program Files\nodejs\node_modules\vue-cli_tmpCopying E:\Program Files\nodejs\node_modules\vue-cli_tmp\_vue-cli@2.9.6@vue-cli to E:\Program Files\nodejs\node_modules\vue-cliInstalling vue-cli's dependencies to E:\Program Files\nodejs\node_modules\vue-cli/node_modules[1/20] commander@^2.9.0 installed at node_modules\_commander@2.20.3@commander[2/20] multimatch@^2.1.0 installed at node_modules\_multimatch@2.1.0@multimatch[3/20] ora@^1.3.0 installed at node_modules\_ora@1.4.0@ora[4/20] consolidate@^0.14.0 installed at node_modules\_consolidate@0.14.5@consolidate[5/20] rimraf@^2.5.0 existed at node_modules\_rimraf@2.7.1@rimraf[6/20] minimatch@^3.0.0 installed at node_modules\_minimatch@3.0.4@minimatch[7/20] chalk@^2.1.0 installed at node_modules\_chalk@2.4.2@chalk[8/20] semver@^5.1.0 installed at node_modules\_semver@5.7.1@semver[9/20] async@^2.4.0 installed at node_modules\_async@2.6.3@async[10/20] uid@0.0.2 installed at node_modules\_uid@0.0.2@uid[11/20] coffee-script@1.12.7 existed at node_modules\_coffee-script@1.12.7@coffee-script[12/20] read-metadata@^1.0.0 installed at node_modules\_read-metadata@1.0.0@read-metadata[13/20] tildify@^1.2.0 installed at node_modules\_tildify@1.2.0@tildify[14/20] user-home@^2.0.0 installed at node_modules\_user-home@2.0.0@user-home[15/20] metalsmith@^2.1.0 installed at node_modules\_metalsmith@2.3.0@metalsmith[16/20] validate-npm-package-name@^3.0.0 installed at node_modules\_validate-npm-package-name@3.0.0@validate-npm-package-name[17/20] download-git-repo@^1.0.1 installed at node_modules\_download-git-repo@1.1.0@download-git-repo[18/20] request@^2.67.0 installed at node_modules\_request@2.88.0@request[19/20] inquirer@^6.0.0 installed at node_modules\_inquirer@6.5.2@inquirer[20/20] handlebars@^4.0.5 installed at node_modules\_handlebars@4.5.3@handlebarsdeprecate metalsmith@2.3.0 › gray-matter@2.1.1 › coffee-script@^1.12.4 CoffeeScript on NPM has moved to "coffeescript" (no hyphen)All packages installed (239 packages installed from npm registry, used 14s(network 13s), speed 391.4kB/s, json 223(445.52kB), tarball 4.55MB)[vue-cli@2.9.6] link E:\Program Files\nodejs\vue@ -> E:\Program Files\nodejs\node_modules\vue-cli\bin\vue[vue-cli@2.9.6] link E:\Program Files\nodejs\vue-init@ -> E:\Program Files\nodejs\node_modules\vue-cli\bin\vue-init[vue-cli@2.9.6] link E:\Program Files\nodejs\vue-list@ -> E:\Program Files\nodejs\node_modules\vue-cli\bin\vue-listC:\Users\ASUS>C:\Users\ASUS>vue init webpack my-projectC:\Users\ASUS>"E:\Program Files\nodejs\\node.exe" "E:\Program Files\nodejs\\node_modules\vue-cli\bin\vue" init webpack my-project'git' �����ڲ����ⲿ���Ҳ���ǿ����еij������������ļ���? Project name my-project? Project description A Vue.js project? Author rongrong? Vue build standalone? Install vue-router? No? Use ESLint to lint your code? Yes? Pick an ESLint preset Standard? Set up unit tests No? Setup e2e tests with Nightwatch? No? Should we run `npm install` for you after the project has been created? (recommended) npm vue-cli · Generated "my-project".# Installing project dependencies ...# ========================npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-pluginnpm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.> core-js@2.6.11 postinstall C:\Users\syp831\my-project\node_modules\core-js> node -e "try{require('./postinstall')}catch(e){}"Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:> https://opencollective.com/core-js> https://www.patreon.com/zloirockAlso, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)> ejs@2.7.4 postinstall C:\Users\syp831\my-project\node_modules\ejs> node ./postinstall.jsThank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)> uglifyjs-webpack-plugin@0.4.6 postinstall C:\Users\ASUS\my-project\node_modules\webpack\node_modules\uglifyjs-webpack-plugin> node lib/post_install.jsnpm notice created a lockfile as package-lock.json. You should commit this file.npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})added 1322 packages from 707 contributors and audited 12454 packages in 273.689s23 packages are looking for funding run `npm fund` for detailsfound 13 vulnerabilities (1 low, 8 moderate, 4 high) run `npm audit fix` to fix them, or `npm audit` for detailsRunning eslint --fix to comply with chosen preset rules...# ========================> my-project@1.0.0 lint C:\Users\syp831\my-project> eslint --ext .js,.vue src "--fix"# Project initialization finished!# ========================To get started: cd my-project npm run devDocumentation can be found at https://vuejs-templates.github.io/webpack
发表评论
最新留言
不错!
[***.144.177.141]2025年03月30日 10时20分49秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
django+appium实现UI自动化测试平台(开源部分,可定制开发)
2021-05-09
PAT 1008. Elevator (20)
2021-05-09
蓝桥杯 密码脱落 LCS
2021-05-09
第七届C/C++B-方格填数 DFS
2021-05-09
数据结构课设--3哈夫曼编码译码系统(树应用)
2021-05-09
pku 1061 青蛙的约会 扩展欧几里得
2021-05-09
Spring Boot 2.4 配置文件将加载机制大变化
2021-05-09
WPF之全局快捷键
2021-05-09
javascript 用函数语句和表达式定义函数的区别
2021-05-09
基于react hooks,antd4 配置生成表单并自动排列
2021-05-09
也来玩玩 javascript对象深拷贝,浅拷贝
2021-05-09
Kubernetes实战总结 - 动态存储管理StorageClass
2021-05-09
Django实战总结 - 快速开发一个Web服务
2021-05-09
【DG】主rac + 备rac dg 部署
2021-05-09
Oracle一次缩小表空间的处理过程
2021-05-09
【三思笔记】 全面学习Oracle分区表及分区索引
2021-05-09
造成错误“ORA-12547: TNS:lost contact”的常见原因有哪些?
2021-05-09
wcf webHttpBinding Post 大数据量提交 ios c#客户端
2021-05-09
[LeetCode题解]141. 环形链表 | 快慢指针
2021-05-09