Vue.js学习笔记（一）--来自于慕课网的入门实战教程

使用 npm run dev 命令运行你的vue项目的时候，你得先使用cd命令进入你的项目目录中去

1、new 一个Vue对象的时候你可以设置它的属性，其中最重要的包括三个，分别是data,methods,watch

2、其中data代表vue对象的数据，methods代表vue对象的方法，watch设置了对象监听的方法

3、Vue对象里的设置通过html指令进行关联

4、重要的指令包括

v-text   渲染数据

v-if   控制显示（条件渲染），元素会从文档流里面删除

v-else  紧接在v-if来配合使用

v-show   控制显示（条件渲染），通过css的display:none来隐藏

v-on   绑定事件

v-for   循环渲染

v-bind  来绑定标签的属性名，可以简写为  :属性名

5、

<template>
  <div id="app">
    ![](./assets/logo.png)
    <hello></hello>
    <h1 v-text="title"></h1>
    <input type="text" name="text" v-model="newItem" v-on:keyup.enter="addNew">
    <ul>
      <li v-for="item in items" v-bind:class="{finished: item.isFinished}" v-on:click="toggleFinish(item)">
        {{item.label}}
      </li>
    </ul>
  </div>
</template>

<script>
import Hello from './components/Hello'

export default {
  name: 'app',
  components: {
    Hello
  },
  data: function(){
    return{
      title: 'this is a todo list',
      items:[
        {
          label: 'coding',
          isFinished: true
        },
        {
          label: 'walking',
          isFinished: true
        }
      ]
    }
  },
  methods: {
    toggleFinish: function(item){
      item.isFinished = !item.isFinished;
      this.newItem = item.label
    },
    addNew: function(){
      this.items.push({ //这里的this是指上面定义的data对象，这个push函数可以把push中的参数（在这里是一个对象）放到items中
        label: this.newItem,//可以理解为v-model指令把newItem绑定到了上面的数据data中，也就是说data里面除了label和isFinished之外，还多了一个newItem
        isFinished: false
      })
      this.newItem = '';
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.finished{
  color: red;
}
</style>

6、

//这是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'

Vue.config.productionTip = false

/* eslint-disable no-new */

//这个new Vue是根组件
// new Vue({
//   el: '#app',//组件要装载的位置，是index.html里的那个id为app的位置
//   template: '<App/>',//装载一个模板
//   components: { App }
// })

//全局注册组件的方法
/*
注册一个my-header的组件，
注册组件的时候不用使用new Vue的那种方法，直接使用{}即可
其中，注册组件的时候不用指明组件的挂载点，
也就是说不用写el这个属性

*/
Vue.component('my-header', {
    template: '<p>header</p>',
}); //

//测试，这是一个根组件
new Vue({
    el: '#app',
    template: '<h1>succuss, {{word}}</h1>', //此时，index.html的那个app就会被替换为我这里的p标签，不过一般我们都不会直接在这里写template，而是直接在挂载点写模板
    data: {
        word: 'hello world2'
    }   //data是组件会用到的数据
});



//这是main.js文件
import Vue from 'vue'

var myHeaderChild = {
    template: '<p>I am my header child</p>'
}

//把myHeader作为变量存起来，组件里面还有一个组件my-header-child
var myHeader = {
    template: '<p>this is my header<my-header-child></my-header-child></p>',
    components: {
        'my-header-child': myHeaderChild,
    }
}

/*
这是一个根组件
因为我们一般不会把所有的组件都注册为全局组件，
所以我们使用components这个属性来注册组件，
这样我们就可以在new Vue这个根组件的内部来使用这个组件了
*/
new Vue({
    el: '#app',
    data: {
        word: 'hello world2'
    },
    components: {//my-header是任意取的配置名
        'my-header': myHeader,  //让my-header这个组件关联到这个'my-header配置里面'
    }
});

7、

要避免组件的data是引用赋值，即：

data: {
        f: 1,
        d: 2
}

应该以函数的形式赋值：

data: function(){
  return {
    f: 1,
    d: 2
  }
}

如果我们通过引用赋值的方式的话，那么，如果一个相同的组件在多个地方使用，但是我只想改变一个地方的组件的data的值，此时，会把所有用到这个组件的地方的data值改变掉

8、

全局API

Vue的实例对象提供的全局方法，例如注册全局组件的Vue.component方法

实例选项

创建一个组件的时候，所传入的对象，例如Vue组件的el、data

实例属性/方法

都是以$符号开头的

指令

写在组件的模板（template）里面，通过模板与数据交互的方法

内置组件：

Vue提供的组件，例如：<component></component>、<keep-alive></keep-alive><router-view></router-view>、<transition></transition>组件

9、

//在App.vue文件里面
/*
v-text和v-html用法的区别
使用表达式
*/
<template>
  <div>
    <p v-text="hello"></p>
    <p v-html="hello"></p>
    {{num + 1}}
    {{status ? 'success' : 'fail'}}
  </div>
</template>

<script>
export default{
  data: function(){
    return {
      hello: '<span style="color:red;">world</span>',
      num: 1,
      status: true,
    }
  }
}
</script>

10、

v-for指令的用法

使用这个指令来进行data里面的数组的渲染

<template>
  <div>
      <ul>
        <li v-for="item in items">
          {{item.name}} - {{item.price}}
        </li>
      </ul>
      <ul>
        <li v-for="(item, index) in items" v-text="item.name + ' - ' + item.price">
        </li>
      </ul>
      <ul>
        <li v-for="(item, index) in items">
          {{item.name}} - {{item.price}} {{index}}
        </li>
      </ul>
  </div>
</template>
<script>
export default{
  data: function(){
    return {
      hello: '<span style="color:red;">world</span>',
      num: 1,
      status: true,
      items: [
        {
          name: 'apple',
          price: '34'
        },
        {
          name: 'banana',
          price: '50'
        }
      ]
    }
  }
}
</script>

11、

v-bind:class（或者:class）的用法

<template>
  <div>
      <ul>
        <li v-for="(item, index) in items" v-bind:class="{odd:index % 2}">
          {{item.name}} - {{item.price}} {{index}}
        </li>
      </ul>
  </div>
</template>
<script>
export default{
  data: function(){
    return {
      hello: '<span style="color:red;">world</span>',
      num: 1,
      status: true,
      items: [
        {
          name: 'apple',
          price: '34'
        },
        {
          name: 'banana',
          price: '50'
        }
      ]
    }
  }
}
</script>

其中，index是从0开始计的，odd是一个类名，如果odd冒号后面的东西是0或者false，那么，不添加这个类，如果是非0或者true，那么，添加这个类

12、

使用v-for来进行data里面的对象的渲染

其中的index不一定是数字了，这一点和渲染数组的情况有些不同

value也可以替换成item或者其他的

//在App.vue文件里面
<template>
  <div>
      <ul>
        <li v-for="(value, index) in objList">
          {{index}}: {{value}}
        </li>
      </ul>
  </div>
</template>
<script>
export default{
  data: function(){
    return {
      hello: '<span style="color:red;">world</span>',
      num: 1,
      status: true,
      objList: {
        name: 'apple',
        price: 34,
        color: 'red',
        weight: 14
      }
    }
  }
}
</script>

13、

我们一般都会把不同的组件放在不同的文件里面，而这些保存组件的文件后缀是.vue，一般都会放在src文件夹下面的components文件夹下面

例如，这是我的信建立的一个a组件，保存在a.vue文件里

<template>
    <p>{{content}}</p>
</template>

<script type="text/javascript">
    export default{
        data: function(){
            return {
                content: 'I am a component'
            }
        }
    }
</script>

然后，我要在app组件（保存在app.vue文件里）里面去引入上面这个a组件：

<template>
  <div>
      <ul>
        <li v-for="(value, index) in objList">
          {{index}}: {{value}}
        </li>
      </ul>
      <componentA></componentA>
  </div>
</template>
<script>
import componentA from './components/a.vue' //引入这个a组件，组件名为from前面的名字componentA

export default{
  components:{componentA},//在引入之前，要先在当前的组件里先注册这个组件，这句话其实是ES6的缩写，他原来是{componentA:componentA}
  data: function(){
    return {
      hello: '<span style="color:red;">world</span>',
      num: 1,
      status: true,
      objList: {
        name: 'apple',
        price: 34,
        color: 'red',
        weight: 14
      }
    }
  }
}
</script>

14、

使用v-for指令来对组件列表循环渲染：

<template>
  <div>
      <ul>
        <li v-for="(value, index) in objList">
          {{index}}: {{value}}
        </li>
      </ul>
      <componentA v-for="(value, index) in objList"></componentA>
  </div>
</template>
<script>
import componentA from './components/a.vue' //引入这个a组件，组件名为from前面的名字componentA

export default{
  components:{componentA},//在引入之前，要先在当前的组件里先注册这个组件，这句话其实是ES6的缩写，他原来是{componentA:componentA}
  data: function(){
    return {
      hello: '<span style="color:red;">world</span>',
      num: 1,
      status: true,
      objList: {
        name: 'apple',
        price: 34,
        color: 'red',
        weight: 14
      }
    }
  }
}
</script>

因为objList有4项，所以，它会循环输出4次a组件

15、

列表数据同步更新方法

例如，使用push可以添加数据进入data里面的属性中

<template>
  <div>
      <ul>
        <li v-for="item in items">
          {{item.name}} {{item.price}}
        </li>
      </ul>
    <button v-on:click="addItem">按钮</button>
  </div>
</template>
<script>
import componentA from './components/a.vue' //引入这个a组件，组件名为from前面的名字componentA

export default{
  components:{componentA},//在引入之前，要先在当前的组件里先注册这个组件，这句话其实是ES6的缩写，他原来是{componentA:componentA}
  data: function(){
    return {
      hello: '<span style="color:red;">world</span>',
      num: 1,
      status: true,
      items: [
        {
          name: 'apple',
          price: 34
        },
        {
          name: 'banana',
          price: 50
        }
      ]
    }
  },
  methods: {//在方法里面可以调用组件里面的数据
    addItem(){
      this.items.push({
        name: 'orange',
        price: 39
      });
    }
  }
}
</script>

那么会把name: 'orange' 和 price: 39加入data里面的items数组列表中

直接对列表的某一项进行赋值，不会更新列表的数据，可以使用set方法（这是Vue的全局方法）去改变数组列表中的某一项的数据

以上笔记是我今天看视频看到的位置，后面还会继续更新(❁ᴗ͈ˬᴗ͈)