[学习笔记]Vue2启航之路

基本语法:

        

 vue框架语言与三大件不同:

        编程范式:命令式编程 就是一个步骤一个步骤执行

        声明式编程(更流行)就是

 计算器案例思路:

 

 

 Tab流行两个空格.

        

Vue的基本指令

1.内容指令

{{}}是mustache语法.插值语法

 V-html内容有标签的时候使用

 V-text是一个没有mustache灵活,他会覆盖mustache语法,而mustache可以进行拼接

 

 

 2.属性指令

 

 Class类名是可以用数组,对象的方式.

 

 在属性使用动态的数据

Style 1.对象 2.数组(在数组里面放对象)

 v-on

 

 

 

 

 V-if 是创建(true)和销毁(false)Dom元素,v-show是style设置行内样式为display:none,开发中更多地是用v-if(从服务器传过来的数据)

 

 复用里的key

修改数据之后不是就可以做到响应式的,用索引去修改只会修改数据,不会修改界面

Pop()

 

 属性值用””,data中使用””,属性值用” ‘’ ”才是字符串

 

 

 

 

V-model会自动判断类型,是checkbox会使用勾选/不勾选,text会使用value属性

V-bind会动态的使用属性

 当添加.lazy修饰符之后(v-model.lazy)，改变input框中的内容并不会使得span中的内容发生变化，此时当输入框失去焦点后触发change事件.控制台中输出相应内容

用v-model修改props是不行的,用data(){return{    }}接收数据才是最好的

@input是输入数据就会触发时间,之后用event作为形参,event.target.value;

@input是输入数据就会触发时间,之后用event作为形参,event.target.value;

 childs2(event) {

                            this.$emit("childs",event.target.value)

                        }

father1(value) {

                    this.sum1 = value

                    // console.log(o);

                }

Input传参是传String类型.

 Number(value)

value*1

转化为Number类型

@click是点击触发事件.

 

import Vue from 'vue' //引入构造函数

export default new Vue() //向外共享实例对象

ref

Vue是关注数据的不关注dom元素;   jq是一个关注dom元素的,不建议在vue使用jq操作dom.可以使用ref操作dom元素

带有$符号的是实例的 this.$ref,查看实例里面的dom元素的ref属性

ref 如果重名的话,后面的话会覆盖前面同名的dom元素

Ref可以加在组件和dom元素中

Input失去焦点用@blur=””就会触发相应事件

使用ref在名字后面使用xxxref

实例代码:

<p ref="p">Hello</p><children ref="children"></children>

this.$refs.pthis.$refs.children

获得与失去焦点的js代码:(focus()与blur())

function setFocus()

  {

  document.getElementById('check1').focus()

  }

function loseFocus()

  {

  document.getElementById('check1').blur()

  }

show() {

      this.vision = !this.vision;

      //beforeUpdate是数据已经更新完毕了,还没有更新dom的数据

//Updated是dom数据更新完毕了

      this.$nextTick(()=>{this.$refs.inref.focus()})

},

this.nextTick(cb)是(()=>{

this.$nextTick(()=>{this.$refs.inref.focus()})

}))//是在dom完成之后才会执行的不会在beforeupdate执行的

 

 写标签就相当于new这个组件的实例对象

 

 编译作用域:在模板里面的数据用的是data(){return{}}的数据,在vm实例里面使用data{}数据

$refs是一种操作dom元素的

Inserted()：钩子函数,表示元素在插入到DOM中的时候，会执行inserted函数，并且只执行一次,有el,binding

Import导入 /export 导出 浏览器不认识common.js的代码,需要进行转换

import Vue from ‘vue’ 解析为 const Vue = require(‘vue’)。

  ul>li{这是一个$}*4

$是一个变量,生成一到四的li节点

Es6

 node应用由模块组成，采用的commonjs模块规范。每一个文件就是一个模块，拥有自己独立的作用域，变量，以及方法等，对其他的模块都不可见。CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。require方法用于加载模块。