Vue学习计划（一）

Vue 起步

vue中data:{} 和 data(){}的区别

由于在vue中的 => data是全局的（在大型的项目中，使用data会造成数据污染），而将data封装一个函数中的话，我们在实例化组件的时候只是调用了这个函数生成的数据副本，这样就避免了数据污染

解决eslint与vscode自带的代码格式化冲突问题

使用.prettierrc进行配置

具体配置如下：

{
	"tabWidth": 2,
	"singleQuote": true,
	"trailingComma": "none",
	"printWidth": 140,
	"semi": false
}

使用.eslintrc.js进行配置

具体配置如下：

module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        'plugin:vue/essential',
        '@vue/standard'
    ],
    parserOptions: {
        parser: 'babel-eslint'
    },
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'space-before-function-paren': 'off'
    }
}

Vue属性绑定

如果需要在将数据绑定到标签的属性中去，此时使用原先的插值表达式或直接使用data中数据的键值名称将无法正常解析，需要通过v-bind在进行属性的绑定（动态绑定），或者更方便的办法使用:在属性名前面，才可以正常的解析data中的值

注意： 如果使用冒号，绑定的是变量，如果不使用冒号，那么使用的则是常量

具体案例如下：

<a :href="url">: => {{ url }}</a><br />
<a v-bind:href="url">v-bing: => {{ url }}</a>

<!-- url="https://www.baidu.com" -->

Vue中没有key的影响

<div v-if="login" class="login">
    <input type="text" value="" />
    <button>登录</button>
</div>
<div v-else class="register">
    <input type="text" value="" />
    <button>注册</button>
</div>
<button @click="loginToggle">切换登录注册</button>

loginToggle() {
	this.login = !this.login
}

如果没key的标识作用，修改数据时，只会更改不一样的部分，相同部分（输入框中的值并不会加以更改）

所以在使用时，一定要绑定对应的key做区分

生命周期钩子函数

created：进行Ajax请求异步数据的获取、初始化数据

mounted：挂载元素内dom节点获取

computed计算属性

computed计算属性可以将复杂的逻辑放入计算中进行处理，同时computed有缓存功能，可防止复杂逻辑多次调用引起的性能问题

watch监听属性

可以监听数据的变化，\使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

class和style绑定

class的使用

# 以对象的形式设置
<div v-bind:class="{ active: isActive }"></div>
# 可以放置多个对象，与普通class属性共存，也可将对象设置在模板中
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
# 还可以设置成数组的形式
<div v-bind:class="[activeClass, errorClass]"></div>
# 结合三元表达式
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

-- 总的来说有两种方式，一是对象，二是数组的形式（二者可以根据需求混合使用）

在组件上使用，在组件声明时，已经有了一些class属性，而在使用时如果再声明了一些class，原有的值不会被覆盖，而是添加在后面

style的使用

同class的设置类似，有对象和数组的形式