Vue入门基础

NPM介绍

NPM是nodejs的包管理系统，是世界最大的包模块管理系统(相当于java中的maven)

在nodejs的基础上，出现的三个主流前端框架：
1.vue.js (中国人开发，符合国情，文档中文)
2.react.js
3.AngularJS

NodeJs环境准备

1.安装node
NodeJs下载地址
安装完成在控制台输入npm -v查看：

2.在idea支持nodejs

3.创建nodejs项目

4.初始化：npm init -y(加y跳过) -----相当于建了一个maven工程

5.安装模块：

全局安装(所有项目都能用)
npm install -g vue
npm -g root 安装路径
局部安装(当前项目使用)
npm install/i vue

ES6语法

ES6是新版本JavaScript语言的语法标准

let与const

把var细分出来，let声明的是变量，const声明的是常量，不可被修改

解构表达式

数组的解构

    //把数组中的值一一对应赋值给a，b，c
    let arr = ["1","2","3"];
    let [a,b,c] = arr;

对象的解构

	let json={"code":200,"msg":'ok',data:[1,2,3]}
    let {code,msg,data} = json;

箭头函数

格式
var 函数名 = (参数列表) => {函数内容}
等价于
var 函数名 = function(参数列表){
函数内容
}
如果参数只有一个可以省略(),函数内容只有一句代码可以省略{}

	 let syahello=emp=>console.log(emp.age);
     syahello(emp)
     //解构函数，只取name
     let syahello2=({name})=>console.log(name);
     syahello2(emp)

导出（export）

	 let f1 = () =>{
	    console.log("被调用了!");
	 }
	 export {f1}

导入（import ）

	<script type="module">
        import {f1} from "./person.js";
        f1()
    </script>

闭包

	let mothed ={
         name : "小胡",
         //this指代的是调用者
         f1 : function () {
             console.log(this.name);
         },
         //箭头函数this指代的是调用者的父级
         f2:()=>{
             console.log(mothed.name);
         },
         //精简this指代的是调用者
         f3(){
             console.log(this.name);
         }
     }

Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

Vue资源安装

1.下载Vue文件到本地：
Vue资源下载
2.在npm方式引入vue

npm install vue

3.在文件中引入vue.min.js

<script src="../node_modules/vue/dist/vue.min.js"></script>

Vue实例挂载

	<div id="app">
	
	</div>
    <script>
        new Vue({
        	//挂载到哪里
            el:'#app',
            //参数（data自身也是一个对象）
            data:{
                msg:"哈哈哈"
            },
            //Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 
            //该对象中值都是方法体方法都是被Vue对象调用,所以方法中的this代表Vue对象(箭头函数除外)
            methods:{
              sayhello(){
                  console.log("sayhello");
                  this.msg=333
            }
        })
    </script>

Vue数据双向绑定

	<div id="app">
		<!--{{msg}}:同步显示input中的数据-->
       <span id="span">{{msg}}</span>
       <!--v-model="msg":双向绑定数据-->
       <input id="text" type="text" v-model="msg"/>
    </div>
	<script>
	    new Vue({
	        el:'#app',
	        data:{
	            msg:'hello'
	        },
	        methods:{
	        }
	    })
	</script>

效果：

Vue表达式

1.在{{ }}中可以进行简单的运算

	<div id="app">
		<h1>{{5+5}}</h1>
	</div>
	<script>
		var app = new Vue({
		  //挂载到id=app元素上
		  el:"#app"
		});
	</script>

2.三目操作符
在{{}}中的表达式可以使用三目运算,但是不能够使用其他语句

	<div id="app">
		<!--三目运算  -->
		{{ show1?"真":"假"}}
	</div>
	<script>
	var app = new Vue({
		el : "#app",
		data : {
			show1 : true
		}
	});
	</script>

3.字符串操作
直接使用字符串字面值作为字符串对象调用方法

	<div id="app">
         {{"这是字面值"}}<br/>
         {{"这是字面值".length}}<br/>
         {{message.length}}<br/>
         {{message.substring(1,5)}}<br/>
         {{message.substring(2,6).toUpperCase()}}<br/>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "这是data中的数据"
            }
        });
    </script>

结果：

4.数组操作
在表达式中可以使用JavaScript数组中的任何语法来操作数组.

	<div id="app">
	    {{hobbys}}<br/>
	    {{hobbys[0]}}<br/>
	    {{hobbys.length}}<br/>
	    {{hobbys.toString()}}<br/>
	    {{hobbys.join("------")}}<br/>
	</div>
	<script>
	var app = new Vue({
		el: "#app",
		data: {
			hobbys:["打游戏","踢足球",'泡MM',"泡GG"]
		}
	});
	</script>

结果：

Vue指令

v-model=“表达式” 数据双向绑定
v-text=“表达式”  设置标签中的文本
v-html=“表达式”  设置标签中的html
v-if(else else if)=“表达式”    判断条件	
v-for=“表达式”   循环
v-on=“表达式”    注册事件