Vue进阶1<----->vue实例、组件、开发模式、基础操作

一、vue实例（对象）

1.一个基本的vue的实例

    
    


    

        

            {{title}}
        
        show
        
显示段落
        {{lowercasetitle}}
    

2.新的实例

new Vue({
	el:"#app2"
})

3.一个实例改变另一个实例中的内容，通过给实例命名

在一个实例中，通过调用另一个实例的属性，来操作其属性

var v1 =  new Vue();
var v2 = new Vue({
    el:"#app2",
    data:{},
    methods:{
        changeTitle:function(){
            v1.title = "changed title";
        }
    }	
});

4.在vue外面操作vue实例——操作属性

setTimeout(function(){
	v1.title="st title";
},2000);

5.调用vue实例中的方法——操作方法

setTimeout(function(){
	v1.btnclick();
},2000);

6.为vue实例设置属性

• vue中的实例属性

  v1.$data  
  v1.$el
  

• 设置实例属性

var data = {
	arg1:"arg1 value"
};
var v2 = new Vue({
	el:"#app2",
	data:data,
})

• 实例属性还能这么调用： v1.$data.title 相当于 v1.title

7.实例属性ref的用法：相当于是id

	show
    show

		
methods:{
	btnclick:function(){
		this.$refs.mybtn1.innerText = "tttttbbbbnnnn";
	}
}

8.动态绑定vue实例到页面中

mount 加载的意思

二、Vue组件

万事万物皆对象

万物皆组件

1.vue组件

Vue.componet 实现全局注册

    

Vue.component("hello",{
	template:"
hello
"
})
new Vue({
	el:"#app1"
}) 

注意： div得是vue的实例，组件创建好后，只要被vue注册过的div里面，都能使用该组件

2.vue的生命周期函数

在控制台查看各函数的调用顺序，并调用destroy，再点改变title按钮，发现改变不了，因为已被销毁

	
		
		
	
	
		

			{{title}}
			change title
			destroy
		
	
	
	

3.一个页面中只有一个div，其他的都是vue组件

vue组件里的data必须使用function的形式对{}对象进行封装，防止对其他数据的修改。
注意，template里必须有一个根节点。

改进版：提高了代码的重用性——万物皆组件

    var cmp = {
			data(){
				return {
					status:"hellllllllo"
				}
			},
			template:'
{{status}}btn
',
			methods:{
				changebtn:function(){
					this.status = "enennnnnnn"
				}
			}
		}
		new Vue({
			el:"#app1",
			components:{
				"my-cap":cmp
			}
		})
		new Vue({
		    el:"#app2",
		    components:{
		        "cap":cmp
		    }
		    
		})

三、vue开发模式

1.vue-cli骨架

	CLI（command line interfaces ）命令行接口。在进行Vue项目开发时，可以选择不同的Vue模板（骨架）进行项目的搭建，比如simple、webpack-simple、webpack、browserify/browserify-simple等；vue-cli是官方提供的一个脚手架（预先定义好的目录结构及基础代码，咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架），用于快速生成一个 vue 的项目模板。

2.详细步骤

• 下载安装node.js
  https://nodejs.org/en/download/

• 在node.js的cmd组件（command prompt）中安装vue-cli

  npm install @vue/cli -g
  

• 创建vue项目文件夹并打开

  mkdir d:/vuedemo
  
  cd d:/vuedemo
  

• 使用vue list命令查看当前可用的vue骨架

• 使用vue命令创建基于vue-webpack-simple骨架的项目,vue-cli-demo是项目名，过程中需要输入一些参数，回车是使用提示的值

  vue init webpack-simple vue-cli-demo
  
  

• 创建基于webpack骨架的项目

  vue init webpack vue-cli-demo
  
  

• 查阅readme.md文档

  npm install  #安装依赖环境
  
  npm run dev	 #进入开发模式
  
  npm run build #发布项目
  
  

3.webpack-simple模板初体验

• 1)进入到项目文件中，安装依赖环境

  npm install
  
  

• 2)进入开发模式

  npm run dev
  
  

  如果提示缺少依赖东西，尝试重新 npm install，如果缺少node-sass，执行以下内容：

  npm install node-sass
  
  

  如果npm命令无法使用，可以使用淘宝镜像 http://npm.taobao.org/

  操作步骤如下：

  # 1. 安装cnpm
  npm install -g cnpm --registry=https://registry.npm.taobao.org
  # 2. 使用cnpm代替npm
  cnpm install
  cnpm run dev
  cnpm run build
  
  

• 开始组件开发
  修改主组件App.vue

四、编写app.vue

1.注意template必须有一个根节点

这样会报错

2.在App.vue组件中使用另一个vue组件

• 新建Home.vue

• 修改main.js

定义Home.vue为组件，并设置其标签名字

import Vue from 'vue'
import App from './App.vue'
import Home from './Home.vue'

Vue.component("app-server-home",Home)

new Vue({
  el: '#app',
  render: h => h(App)
})

• 修改App.vue

直接使用在main.js中定义的组件的标签名

3.组件中嵌套组件

app内使用home，home内使用subcontent。并在home中本地注册subcontent组件。

五、在项目中使用bootstrap

1.在index.html中引入bootstrap.css

2.编写组件，组件中使用bootstrap

编写header、footer、content组件

• header组件

• footer组件

• content组件

3.在app.vue中本地注册这些组件并使用

六、组件的全局注册

在main.js中注册组件，该组件能够在项目中的每个Vue中被使用

import Home from './Home.vue';
Vue.component("appHome",Home);

完成组件注册后，就可以在其他组件中使用：

七、在组件中使用样式

在组件中定义样式，组件里的样式会影响所有组件，如何设定，让样式只作用于当前组件？

content组件中的style将会影响整个页面的元素，因此在组件的style标签里加入scoped关键字，让该样式只作用于当前组件。

八、各组件中的参数传递

1.父传子

通过父vue的标签属性传递参数：

• App.vue

• sub1.vue

props后存放数组，表示可以拿多个参数。也可以改写成一个对象：

2.子组件调用父组件中的函数并传递参数

• App.vue

• sub1.vue

3.改进版的参数传递(常用)

从下往上的事件发射

• sub1.vue

doClick:function(){
		//this.ffn("xiaohe");
		this.$emit('newName','xiaoliu');
}

• App.vue