初始化一个vue项目

前言

• demo为chnq/vue/vue/vue-demo
• 项目地址

初始化

• 参考这篇博客构建一个最简单的vue项目
• 启动项目后报错：errors and 0 warnings potentially fixable with the --fix option.
• 解决方案：配置项目根目录下的package.json

"lint": "eslint --fix --ext .js,.vue src",

• 自定义一个组件，添加到根组件后，启动项目报错：Module Error (from ./node_modules/eslint-loader/index.js):
• 解决方案：项目根路径下新建vue.config.js

  module.exports = {
    lintOnSave: false
  }

基础使用

• 自定义组件

# 在components目录下新建一个子组件 UserList.vue
<template>
    <div>
        Hello!!
    </div>
</template>

<script>
export default {

}
</script>

• 根组件中导入该子组件并使用

<template>
  <div>
    <user-list/>
  </div>
</template>

<script>
import UserList from './components/UserList.vue'
export default {
  name: 'App',
  components: {
    UserList,
  }
}
</script>

• 页面渲染

<template>
  <div>
    <!-- 使用子组件 -->
    <user-list/>
    <!-- 声明式渲染 -->
    {{msg}}
    <!-- 双向绑定 -->
    <div id="two-way-binding">
        <p>{{ message }}</p>
        <input v-model="message" />
    </div>
    <!-- v-if -->
    <div id="conditional-rendering">
        <span v-if="seen">现在你看到我了</span>
    </div>
    <!-- v-for -->
    <div id="list-rendering">
        <ol>
          <li v-for="todo in todos">
            {{ todo.text }}
          </li>
        </ol>
    </div>
  </div>
</template>

<script>
import UserList from './components/UserList.vue'
export default {
  name: 'App',
  components: {
    UserList,   // 子组件
  },
  data() {
    return {
        msg: '文本',    // 声明式渲染
        message: 'Hello Vue!',     // 双向绑定
        seen: true,   // v-if
        todos: [
          { text: 'Learn JavaScript' },
          { text: 'Learn Vue' },
          { text: 'Build something awesome' }
        ]   // v-for
    }
  },
  created(){
    console.log("生命周期！")
  }
}
</script>

• 指令及其缩写

<template>
    <div>
        <!-- v-bind -->
        <a v-bind:href="myUrl" v-bind:title="myTitle" v-bind:id="myId">这是a标签</a><br>
        <!-- v-bind缩写 -->
        <a :href="myUrl">v-bind的缩写</a><br>
        <!-- v-on -->
        <input type="text" v-on:blur="myBlur"><br>
        <!-- v-on缩写 -->
        <button @click="mySubmit">v-on的缩写：v-on:替换成@</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            myUrl: 'www.baidu.com'
            ,myTitle: '这是title_2'
            ,myId: 'id2'
            ,myUrl: 'https://www.baidu.com/'
        }
    },
    methods: {
        myBlur(){
            console.log("失去焦点！");
        },
        mySubmit(){
            console.log("阻止提交！")    
        }
    }
}
</script>

• 侦听器

<template>
    <div>
        <input type="text" v-model="msg"><br>
        <input type="text" v-model="name">
    </div>
</template>
 
<script>
export default {
    data() {
        return {
            msg: '',
            name: ''
        }
    },
    watch: {
        msg(oldValue,newValue){
            console.log("oldValue:", oldValue, ",newValue:", newValue);
        }
        ,name(oldval,newval){
            console.log("oldval:", oldval, ",oldval:", oldval)
            this.getUser(newval)  //调用方法
        }
    },
    methods: {
        getUser(name){
            // 发送请求的方法，这里结合侦听器使用
            console.log("name:", name)
        }
    }
}
</script>