vue安装
下载地址
https://cn.vuejs.org/v2/guide/installation.html
版本选择
选择开发版本下载
如何引入
直接用 <script> 引入，直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。
<script src="js/vue.js"></script>
Vue入门程序
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"head> Meta charset="UTF-8"title>Vue入门程序 </script src="js/vue.js"></scriptbody> <!--div标签就是挂载点，挂载点内部都是模板内容--> div id="root"> v-on:click和@click效果一样，为简写形式--> @click="welcome">{{msg}}div使用v-text直接输出转义后文本v-text="content"显示未转义文本v-html> var root; // vue实例 root=new Vue({ el:"#root,模拟内容 template:'<h1>helllow {{msg}}</h1>', data:{ msg: world<h1>111111</h1> },1)">methods中定义事件及函数方法 methods:{ welcome:function () { this.msghellow world! } } }) > html>
Vue中的属性绑定和双向数据绑定
="http://www.w3.org/1999/xhtml" xmlns:v-bind>Vue中的属性绑定和双向数据绑定使用v-bind做属性绑定，其中title是vue实例中的变量对象 可简写为:title即：冒号+属性名称，:+title :title="'hey '+title"> hellow world !input v-model/> >{{content}}属性绑定语法：使用:+属性名称双向数据绑定语法：使用v-model="vue中的变量对象名称"hellow world !this is content! } }) >
小结
使用v-bind做属性绑定，其中title是vue实例中的变量对象
双向数据绑定语法：使用v-model="vue中的变量对象名称"
Vue中的计算属性和侦听器
>Vue中的计算属性和侦听器> 姓="firstName"/> 名="lastName">{{fullName}}>{{count}} 侦听器值得是监听某个数据的变化，一旦变化就可以在监听方法了，做业务逻辑 计算属性computed，指的是他是有其他属性经过运算而来，即新的结果 root; rootirstName:""0mputed:{ fullName:return .firstName+" .lastName } },watch:{ fullName:.count++; } } }) >
侦听器值得是监听某个数据的变化，一旦变化就可以在监听方法了，做业务逻辑
计算属性computed，指的是他是有其他属性经过运算而来，即新的结果
v-if,v-show与v-for指令
xmlns:key>v-if,v-show与v-for指令v-if="show"button ="isdisplay">my buttonbuttonul> li v-for="(item,index) of list" :key="index">{{item}}li="item of list" app; 123],show:truedisplay:.show=!.show; } } }) >
v-if
v-show
v-for
控制一组数据，控制一组数据，通过控制一组数据来循环显示一组数据的dom结构
todolist功能开发
todolist组件拆分
>todolist组件拆分todo-item ="index" :content="item"todo-item 全局组件 Vue.component(todo-itemcontent<li>{{content}}</li> } ) 局部组件的使用 var Todoitem={ template:"<li>item</li>" } components:{ "todo-item":Todoitem },1)"> data:{ inputValue:>
todolist的删除功能
>实现todolist的删除功能/> > ="item" :index @delete="ieDelete"> Vue.component('index接收显示的内容和下标 template: <li @click='isclick'>{{content}}</li> () { 触发删除事件 .$emit(delete.index) } } } ) 局部组件的使用 var Todoitem={ template:"<li>item</li>" } app; app = Vue({ el: components:{ "todo-item":Todoitem data: { inputValue: () { 使用push为数据赋值 .inputValue); .inputValue },ieDelete: (index) { 从对应下标中删除一项 .list.splice(index,1)">) } } }) >
C:\Users\ASUS>cnpm install --global vue-cli Downloading vue-cli to E:\Program Files\nodejs\node_modules\vue-cli_tmp copying E:\Program Files\nodejs\node_modules\vue-cli_tmp\_vue-cli@2.9.6@vue-cli to E:\Program vue-cli Installing 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@request deprecate 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 vue-init [vue-cli@2.9.6] link E:\Program Files\nodejs\vue-list@ -> E:\Program vue-list C:\Users\ASUS>@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@handlebars deprecate Metalsmith@2.3.0 › gray-matter@2.1.1 › coffee-script@^1.12.4 CoffeeScript C:\Users\ASUS>vue init webpack my-project C:\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-plugin npm 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 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 ) 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/zloirock Also,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.js Thank 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.js npm 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.689s 23 packages are looking funding run `npm fund` details found 13 vulnerabilities (1 low,8 moderate,4 high) run `npm audit fix` to fix them,or `npm audit` details Running 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 dev Documentation can be found at https://vuejs-templates.github.io/webpack
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
