初识vue系列之二

vue中的dom操作

两步:
给我们想要操作的dom元素加上ref属性，并赋值: 

<div
ref="mydiv"></div>

做了这个操作之年，vue内部会获取所有有ref属性元素.
在想要操作dom的代码的位置写

this.$refs.mydiv

，这个对象表示的是我的要操作的div这个元素的原生dom对象。
最终有了这个对象，就向往常一样操作dom就可以了!

设计师!

1.4. vue父子组件相互传值(传数据)

1.4.1. 父组件给子组件传值:

在组件中使用子组件

<div>
<Add test="哈哈" :mylist="list"></Add></div>

给使用的子组件标签添加属性,属性的值就是我们要传递的值,最终子组件可以接收到test和mylist对应的值
所谓的传递值，其实vue底层是把test的值mylist赋给了子组件的实例对象

父组件可以给子组件传很多值, 子组件可以有选择的接收:
接收时，要给子组件添加props属性，属性值为数组,数组中的元素就是我们想要接收的数据对应的属性名

props:['test','mylist']

var test = 3 子组件实例对象.test = test

父给子传，其实是赋值: 

子组件实例.属性 = 父组件实例.属性

1.4.2. 子给父传值

调用的其实是方法 预先在父组件中写好方法，在子组件中想办法调用这个方法 

getdata2(arg){}

在父组件中写子组件标签时,要给子组件标签注册事件: 

<Son
@随便起名字A="getdata2"></Son>

在子组件中，当我们想调用getdata2这个方法时, 

this.$emit('随便起名字A',传递给getdata2的参数)

 this.$emit里其实最终是调用了父组件实例的getdata2方法

1.4.3. 组件的生命周期

只是说明的是个过程
我们出现之前... beforeCreated(){}
我们细胞出现后：created()
出生是: mounted() ....
结束

beforecreate

created: 实例创建完成后调用

mounted: dom结构加载完成: 当前组件的template添加到dom中之后调用

1.5. 路由

npm
install vue-router --save

hashchange

事件,当url锚点改变时会触发这个事件
1.定义要用到的组件
2.配置路由规则
3.创建VueRoter实例，并传入2中配置的规则，routes
4.new Vue实例,并传3中创建的实例，赋值router属性
5.指定路由中配置的组件在dom中的显示位置，

最终路由对应的组件会替换router-view

1.6. webpack

npm
install webpack -g

npm
install webpack-dev-server -g

1.6.1. 神器!

npm 默认是从npm官网下载的包
其实可以第一次联网，以后就不用联网了

1.6.2. sinopia

1.下载: 

npm
install -g sinopia

1.6.3. 明天需要下载的包

1.6.3.1. 全局下载的

npm
install webpack -g

npm
install webpack-dev-server -g

1.6.3.2. 非全局下载的

npm
install webpack

npm
install webpack-dev-server

npm
install babel-core

npm
install babel-preset-es2015

npm
install html-webpack-plugin

npm
install less

npm
install bable-loader

npm
install less-loader

npm
install file-loader

npm
install url-loader

npm
install style-loader

npm
install css-loader

npm
install less-loader

npm install vue-loader

--save

是浏览器执行时需要的
node执行时需要

--save-dev

是开发时必需要有的
nodemon --save-dev
表明代码在运行时，可以不用它

babel-preset-es2015 --save-dev
将es6转换为es5,是在浏览器运行代码之前
是在开发的时候就转换好的
const a = 3: var a = 3

jquery --save

$('div').html('xxx')

vue --save

webpack --save-dev

less-loader --save-dev

vue-router --save

-g