【笔记】vue2.x轻松入门-谢榭-CSDN

vue2.x轻松入门-谢榭的在线视频教程-CSDN学院

---

• 脚本在前必须写在以下代码内

window.onload = function(){}

---

• 数组遍历

var app = new Vue({
    el: "#app",
    data: {
        arr: [1,2,3,4,5]
    }
})

<div id="app">
    <ul>
        <li v-for="value in arr">{{value}}</li>
    </ul>
</div>

---

• 对象遍历

var app = new Vue({
    el: "#app",
    data: {
        user: {id:1,name:'jack'}
    }
})

<div id="app">
    <ul>
        <li v-for="v in user">{{v}}</li>
    </ul>
</div>

---

• 对象数组遍历

var app = new Vue({
    el: "#app",
    data: {
        users: [{id:1,name:'jack'}{id:2,name:'joy'}]
    }
})

<div id="app">
    <ul>
        <li v-for="(user, index) in users">{{index}},{{user.name}}</li>
    </ul>
</div>

---

• 属性绑定

var app = new Vue({
    el: "#app",
    data: {
        title: "属性绑定"
    }
})

<div id="app">
    <button v-bind:title="title">click me</button>
</div>

---

• 双向数据绑定

var app = new Vue({
    el: "#app",
    data: {
        content: ''
    }
})

<div id="app">
    <input v-model="content"/>{{content}}
</div>

---

• 计算属性与监听器

var app = new Vue({
    el: "#app",
    data: {
        banana: 15,
        orange: 20
    },
    methods: {
        getShoppingCart(){
            return this.shoppingCart;
        }
        change(){
            this.banana = 25;
        }
    },
    computed: {
        shoppingCart: function(){
            console.log(new Date().toLocaleString());
            return this.banana+this.orange+"元";
        }
    },
    watch: {
        banana: function(newValue, oldValue){
            console.log(newValue, oldValue);
        },
        shoppingCart: function(newValue, oldValue){
            console.log(newValue, oldValue);
        }
    }
})

<div id="app">
    <h2>{{shoppingCart}}</h2>
    <h2>{{getShoppingCart}}</h2>
    <button @click="change">updateBanana</button>
</div>

---

• todolist

<script>
var todoItem = {
  props: ['item2', 'index'],
  template: '<li style="cursor:pointer" @click="handleClick"><b>{{item2}}</b></li>',
  methods:{
      handleClick(){
          console.log('handleClick');
          this.$emit('delete',this.index);
      }
  }
}
var app = new Vue({
  el: "#app",
  data: {
      content: '',
      data:[]
  },
  components:{
      'todo-item':todoItem
  },
  methods: {
      handleSubmit(){
          if(this.content){
              this.data.push(this.content);
              console.log(this.data);
              this.content='';
          }
      },
      handleDelete(index){
          this.data.splice(index, 1);
      }
  }
})
</script>

<div id="app">
    todo:<input v-model="content"/>
    <button @click="handleSubmit" > submit </button>
    <ul>
        <todo-item v-for="(item,index) of data" :key="index" :item2="item" :index="index" @delete="handleDelete"></todo-item>
    </ul>
</div>

---

• vue-cli
  安装命令：cnpm i -g vue-cli
• 新建项目
  vue init webpack myproject
• 安装
  cnpm install
• 运行项目
  npm run dev

http://localhost:8080

• 没有问题的话可以看到Hello world

在src\components目录下新增如下两个文件：

• TodoItem.vue

<template>
  <li style="cursor:pointer" @click="handleClick"><b>{{item2}}</b></li>
</template>
<script>
export default{
  name: 'todoItem',
  props: ['item2', 'index'],
  methods:{
      handleClick(){
          console.log('handleClick');
          this.$emit('delete',this.index);
      }
  }
}
</script>

• TodoList.vue

<template>
  <div>
      todo:<input v-model="content"/>
      <button @click="handleSubmit" > submit </button>
      <ul>
          <todo-item v-for="(item,index) of data" :key="index" :item2="item" :index="index" @delete="handleDelete"></todo-item>
      </ul>
  </div>
</template>
<script>
  import todoItem from './TodoItem.vue'
  export default{
    name: 'todoList',
    data(){
      return{
        content: '',
        data:[]
      }
    },
    components:{
        todoItem
    },
    methods: {
        handleSubmit(){
            if(this.content){
                this.data.push(this.content);
                console.log(this.data);
                this.content='';
            }
        },
        handleDelete(index){
            this.data.splice(index, 1);
        }
    }
  }
</script>

修改src目录下的main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import TodoList from './components/TodoList.vue'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { TodoList },
  template: '<TodoList/>'
})

• 运行成功！

---

? Project name (myproject)

? Project description (A Vue.js project)

? Author

? Vue build (Use arrow keys)

Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific H
TML) are ONLY allowed in .vue files - render functions are required elsewhere

? Install vue-router? (Y/n)

? Use ESLint to lint your code? (Y/n)

? Set up unit tests (Y/n)

? Setup e2e tests with Nightwatch? (Y/n)

? Should we run npm install for you after the project has been created? (recom
mended) (Use arrow keys)

Yes, use NPM
Yes, use Yarn
No, I will handle that myself

$ vue init webpack myproject

? Project name (myproject)
? Project name myproject
? Project description (A Vue.js project)
? Project description A Vue.js project
? Author oliver
? Author oliver
? Vue build (Use arrow keys)
> Runtime + Compiler: recommended for most users
? Vue build runtime
? Install vue-router? (Y/n) y
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n
? Use ESLint to lint your code? No
? Set up unit tests (Y/n) n
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n) n
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

   vue-cli · Generated "myproject".


# Installing project dependencies ...
# ========================

npm WARN deprecated [email protected]: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated [email protected]: 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 [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

var app = new Vue({
    el: "#app",
    data: {
        
    }
})

<div id="app">
</div>

$ cnpm install
× Install fail! Error: EISDIR: illegal operation on a directory, symlink 'Z:\VM_win7\project\myproject\node_modules\[email protected]@babel-plugin-transform-runtime' -> 'Z:\VM_win7\project\myproject\node_modules\babel-plugin-transform-runtime'
Error: EISDIR: illegal operation on a directory, symlink 'Z:\VM_win7\project\myproject\node_modules\[email protected]@babel-plugin-transform-runtime' -> 'Z:\VM_win7\project\myproject\node_modules\babel-plugin-transform-runtime'
npminstall version: 3.27.0
npminstall args: C:\Program Files\nodejs\node.exe C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\bin\install.js --fix-bug-versions --china --userconfig=C:\Users\Administrator\.cnpmrc --disturl=https://npm.taobao.org/mirrors/node --registry=https://r.npm.taobao.org

cnpm install 时报错 Error: EISDIR: illegal operation on a directory - 简书