vue2从入门到精通学习-（学习尚硅谷课程）-持续更新

原文链接：

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili：

1. vue的特点

（1）采用组件化模式，提高代码复用率，且让代码更好维护

（2）申明式编码，让编码人员无需直接操作DOM.提高开发效率

命令式编码：

例子：
// 准备hrml字符串
let htmlStr = '';
// 遍历数据拼接html字符串
personsforEach(p => {
   htmlStr+= `<li>${p.id} + </li>`
})
// 获取list 元素
let list = document.getElementById('list');
// 修改内容
list.innerHTML = htmlStr;

申明式编码：

<ul id='list'>
  <li v-for="p in persons">
    {{p.id }}
  </li>
</ul>

生命周期：

vue项目搭建：

mvvm

指令以及修饰符

过滤器：

动态改变class:

v-model

修饰符：

常见的交互事件：

vue父子组件实例

vue子组件传给父组件

常见的修饰符：

按键修饰符：

vue创建实例

1.想让vue工作，必须创建一个vue实例且要传入一个配置对象
2.root容器中的代码依然符合http规范，只不过混入了一些特殊的Vue语法
3.root容器里的代码被称为Vue模板
容器和实例对应关系为1对1
new Vue({
    el: "#app",// el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
    data: {
        'xx',// data中用于存储数据，数据供el所指定的容器去使用，值我们暂时写成一个对象
      }
    router,
    store,
    i18n,
    render: h => h(App)
});

第二种写法,挂载
v.$mount("#root")

双向绑定

v-model 只能用于表单类元素（输入类元素）

参考原文：008_尚硅谷Vue技术_数据绑定_哔哩哔哩_bilibili

单向绑定

数据只能从data流向页面

data的2种写法
new Vue({
  el: '#root',
   // data的第一种写法：对象式
   data: {
    name: 'XXX'
    }
   // data的第二种写法：函数式
    data：function() {
    return {
            name: 'XXX'
        }
    }
})

箭头函数没有自己的this 指向的外层的windows
所以data不要写成箭头函数

MVVM

观察发现：

1. data中所有的属性，最后都发现在vm身上

2. vm身上所有的属性，以及Vue原型上所有的属性，在vue模板中都可以直接使用