Vue基础入门学习

前端开发作者： 2024-08-26 10:50:01

vue安装下载地址 https://cn.vuejs.org/v2/guide/installation.html 版本选择选择开发版本下载如何引入直接用 <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!
          }
      })
  >

小结

Vue中的计算属性和侦听器

>Vue中的计算属性和侦听器>
      姓="firstName"/>
      名="lastName">{{fullName}}>{{count}}
      侦听器值得是监听某个数据的变化，一旦变化就可以在监听方法了，做业务逻辑
      计算属性computed，指的是他是有其他属性经过运算而来，即新的结果
   root;
      root""0return .firstName+" .lastName
              }
          },watch:{
              fullName:.count++;
              }
          }
      })
  >

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:true.show=!.show;
              }
          }
      })
  >

v-if

v-show

v-for

todolist功能开发

>todolist功能开发="inputValue"="submit">提交 app;
      app''使用push为数据赋值
                  .list.push(.inputValue);
                  .inputValue>

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' �����ڲ����ⲿ���Ҳ���ǿ����еĳ���
���������ļ���
? 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