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入门程序 </title> <script src="js/vue.js"></script> </head> <body> <!--div标签就是挂载点，挂载点内部都是模板内容--> <div id="root"> <!--v-on:click和@click效果一样，为简写形式--> <div @click="welcome">{{msg}}</div> <!--使用v-text直接输出转义后文本--> <div v-text="content"></div> <!--显示未转义文本--> <div v-html="content"></div> </div> </div> <script> var root; // vue实例 root=new Vue({ el:"#root", //模拟内容 // template:'<h1>helllow {{msg}}</h1>', data:{ msg:" world", content:"<h1>111111</h1>" }, //methods中定义事件及函数方法 methods:{ welcome:function () { this.msg="hellow world!" } } }) </script> </body> </html>
Vue中的属性绑定和双向数据绑定
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Vue中的属性绑定和双向数据绑定</title> <script src="js/vue.js"></script> </head> <body> <!--div标签就是挂载点，挂载点内部都是模板内容--> <div id="root"> <!--使用v-bind做属性绑定，其中title是vue实例中的变量对象 可简写为:title即：冒号+属性名称，:+title --> <div :title="'hey '+title"> hellow world !</div> <input v-model="content"/> <div>{{content}}</div> <!--属性绑定语法：使用:+属性名称--> <!--双向数据绑定语法：使用v-model="vue中的变量对象名称"--> </div> <script> var root; // vue实例 root=new Vue({ el:"#root", data:{ title:"hellow world !", content:"this is content!" } }) </script> </body> </html>
小结
使用v-bind做属性绑定，其中title是vue实例中的变量对象
可简写为:title即：冒号+属性名称，如：:+title
属性绑定语法：使用:+属性名称
双向数据绑定语法：使用v-model="vue中的变量对象名称"
Vue中的计算属性和侦听器
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Vue中的计算属性和侦听器</title> <script src="js/vue.js"></script> </head> <body> <div id="root"> 姓<input v-model="firstName"/> 名<input v-model="lastName"/> <div>{{fullName}}</div> <div>{{count}}</div> 侦听器值得是监听某个数据的变化，一旦变化就可以在监听方法了，做业务逻辑 计算属性computed，指的是他是有其他属性经过运算而来，即新的结果 </div> <script> var root; root=new Vue({ el:"#root", data:{ firstName:"", lastName:"", count:0 }, computed:{ fullName:function () { return this.firstName+" "+this.lastName } }, watch:{ fullName:function () { this.count++; } } }) </script> </body> </html>
侦听器值得是监听某个数据的变化，一旦变化就可以在监听方法了，做业务逻辑
计算属性computed，指的是他是有其他属性经过运算而来，即新的结果
v-if, v-show与v-for指令
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:key="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>v-if, v-show与v-for指令</title> <script src="js/vue.js"></script> </head> <body> <div id="root"> <div v-if="show">{{content}}</div> <button @click="isDisplay">my button</button> <ul> <li v-for="(item,index) of list" :key="index">{{item}}</li> <li v-for="item of list">{{item}}</li> </ul> </div> <script> var app; new Vue({ el:"#root", data:{ content:"hellow world!", list:[1,2,3], show:true }, methods:{ isDisplay:function () { this.show=!this.show; } } }) </script> </body> </html>
v-if
有移除元素标签的效果，控制dom的存在与否
v-show
控制dom的显示与否，元素显示或隐藏
v-for
控制一组数据，控制一组数据，通过控制一组数据来循环显示一组数据的dom结构
todolist功能开发
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:key="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>todolist功能开发</title> <script src="js/vue.js"></script> </head> <body> <div id="root"> <input v-model="inputValue"/> <button @click="submit">提交</button> <ul> <li v-for="(item,index) of list" :key="index">{{item}}</li> </ul> </div> <script> var app; app=new Vue({ el:"#root", data:{ inputValue:'', list:[] }, methods:{ submit:function () { //使用push为数据赋值 this.list.push(this.inputValue); this.inputValue='' } } }) </script> </body> </html>
todolist组件拆分
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:key="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>todolist组件拆分</title> <script src="js/vue.js"></script> </head> <body> <div id="root"> <input v-model="inputValue"/> <button @click="submit">提交</button> <ul> <todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item> </ul> </div> <script> // 全局组件 Vue.component("todo-item",{ props:["content"], template:"<li>{{content}}</li>" } ) //局部组件的使用 // var Todoitem={ // template:"<li>item</li>" // } var app; app=new Vue({ el:"#root", // components:{ // "todo-item":Todoitem // }, data:{ inputValue:'', list:[] }, methods:{ submit:function () { //使用push为数据赋值 this.list.push(this.inputValue); this.inputValue='' } } }) </script> </body> </html>
todolist的删除功能
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:key="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>实现todolist的删除功能</title> <script src="js/vue.js"></script> </head> <body> <div id="root"> <input v-model="inputValue"/> <button @click="submit">提交</button> <ul> <todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="ieDelete"></todo-item> </ul> </div> <script> // 全局组件 Vue.component("todo-item", { props: ['content', 'index'],//接收显示的内容和下标 template: "<li @click='isclick'>{{content}}</li>", methods: { isclick: function () { //触发删除事件 this.$emit("delete", this.index) } } } ) //局部组件的使用 // var Todoitem={ // template:"<li>item</li>" // } var app; app = new Vue({ el: "#root", // components:{ // "todo-item":Todoitem // }, data: { inputValue: '', list: [] }, methods: { submit: function () { //使用push为数据赋值 this.list.push(this.inputValue); this.inputValue = '' }, ieDelete: function (index) { //从对应下标中删除一项 this.list.splice(index, 1) } } }) </script> </body> </html>
C:UsersASUS>cnpm install --global vue-cli Downloading vue-cli to E:Program Files odejs ode_modulesvue-cli_tmp Copying E:Program Files odejs ode_modulesvue-cli_tmp\_vue-cli@2.9.6@vue-cli to E:Program Files odejs ode_modulesvue-cli Installing vue-cli's dependencies to E:Program Files odejs ode_modulesvue-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 odejsvue@ -> E:Program Files odejs ode_modulesvue-cliinvue [vue-cli@2.9.6] link E:Program Files odejsvue-init@ -> E:Program Files odejs ode_modulesvue-cliinvue-init [vue-cli@2.9.6] link E:Program Files odejsvue-list@ -> E:Program Files odejs ode_modulesvue-cliinvue-list C:UsersASUS>cnpm install --global vue-cli Downloading vue-cli to E:Program Files odejs ode_modulesvue-cli_tmp Copying E:Program Files odejs ode_modulesvue-cli_tmp\_vue-cli@2.9.6@vue-cli to E:Program Files odejs ode_modulesvue-cli Installing vue-cli's dependencies to E:Program Files odejs ode_modulesvue-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@handlebars 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 14s(network 13s), speed 391.4kB/s, json 223(445.52kB), tarball 4.55MB) [vue-cli@2.9.6] link E:Program Files odejsvue@ -> E:Program Files odejs ode_modulesvue-cliinvue [vue-cli@2.9.6] link E:Program Files odejsvue-init@ -> E:Program Files odejs ode_modulesvue-cliinvue-init [vue-cli@2.9.6] link E:Program Files odejsvue-list@ -> E:Program Files odejs ode_modulesvue-cliinvue-list C:UsersASUS> C:UsersASUS>vue init webpack my-project C:UsersASUS>"E:Program Files odejs\node.exe" "E:Program Files odejs\node_modulesvue-cliinvue" 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 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:Userssyp831my-project ode_modulescore-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/zloirock Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -) > ejs@2.7.4 postinstall C:Userssyp831my-project ode_modulesejs > 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:UsersASUSmy-project ode_moduleswebpack ode_modulesuglifyjs-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_modulesfsevents): 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 for funding run `npm fund` for details found 13 vulnerabilities (1 low, 8 moderate, 4 high) run `npm audit fix` to fix them, or `npm audit` for details Running eslint --fix to comply with chosen preset rules... # ======================== > my-project@1.0.0 lint C:Userssyp831my-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