Vue入门学习（1）

Vue入门学习（1）

创建项目

安装nodejs后，安装Vue Cli工具，在系统PowerShell中运行以下代码（不是在node.js中）。

npm install -g @vue/cli

创建一个想保存项目的文件夹，在创建的目录下cmd进入终端命令行，比如创建了Vue文件夹后，选中路径输入cmd回车。

这样直接到了想要创建项目的文件夹下，不用再cd命令切换过去，所有文件夹都可以这样直接到终端路径下。

创建项目命令

vue create vue-demo
项目创建成功：

将项目运行起来：
项目创建成功后就有命令行提示：

cd vue-demo     //切换到项目路径
npm run serve	//运行

使用vscode打开所创建的项目

文件夹作用

• assets：存放静态资源。
• components：保存组件，一个个Vue文件可以看作一个个组件，保存Vue代码的地方。
• app.vue：主入口的组件。
• main.js ：js的主入口文件。
• registerServiceWorker：程序的监听文件。

1.模板语法

{{ }}动态显示文本

{{ msg }} ，msg就是一个变量。一般配合JS中的data来展示数据。{{ }} 2层大括号中放变量，可以动态显示赋值给变量的文本，可以说是最常见的模板语法。
一些标签和语法的说明

<template>
  <!-- 组件的模板部分 -->
</template>

<script>
export default {
  // 组件的配置项
  name: 'MyComponent',
  data() {
    return {
      // 组件的数据
    };
  },
  methods: {
    // 组件的方法
  },
  // ...其他组件选项
};
</script>

<style scoped>
/* 组件的样式 */
</style>

在Vue的单文件组件中，通常包含三个部分：模板（template）、脚本（script）和样式（style）。

• template：可以当作html标签，页面html内容写在template标签之间。
• export default：用于导出一个模块的默认内容。它的主要用途是在单文件组件中导出组件的定义。它可以是一个组件选项对象，其中包含组件的配置项，例如组件的名称、数据、属性、方法等，也可以是一个Vue实例。默认生成的props属性的作用是在不同组件之间传递数据，后面会详细说明。

简单实例：

<template>
  <div>
      <p>{{ message }} </p>
  </div>
</template>

export default {
  name: 'HelloWorld',
data(){
  return{
  message:"测试一下",
    }
  },
}

其实vue的组件，就是页面html，js加css组合而成。用方便的符合vue语法规范的形式来写，封装在一个文件中就是组件。

tip：使用vue只要保存就会自送刷新,不用在页面中去手动刷新。

v-html解析渲染HTML代码

定义一个a标签:

rawhtml:"<a href ='www.baidu.com'>百度</a>",

两种方式渲染到页面中:

  <div>{{rawhtml}}</div>
  <div v-html="rawhtml"> </div>

v-html会解析html语言,区别相当于innerHtml 和 innerText。

v-bind绑定动态id,class等属性通常缩写为冒号

什么是动态id,class : 平时所使用的id,class等都是静态的,定义好了之后就一直是那个定义的类或属性,这里用v-bind可以绑定动态的属性,就是绑定一个变量,变量值是可以操作的、动态的。

  <div v-bind：id = "dynamicID">{{rawhtml}}</div>

这个id是根据对变量的操作来确定的，这里只是赋值了一下。

    dynamicID:"app",

v-bind 可以简写成冒号 ：

 data(){
   return{
    message:"自动刷新?",
    rawhtml:"<a href ='www.baidu.com'>百度</a>",
    dynamicID:"app",
   }
  }

v-bind绑定后，这样这些属性都是动态的。


data中定义一个num :10,

  <div v-bind:class ="dynamicID">{{ num+100 }}</div>

data定义一个flag : true,做三元运算

  <div>{{ flag ? "真猴子":"假猴子" }}</div>

2.条件渲染

v-if指定条件渲染一块内容,在指令表达式为true的时候渲染

意思就是先定义好一个模块的内容，但这个模块内容是不可见的，相当于一个开关，表达式为true时打开开关，渲染模块的内容，可以用这个进行许多骚操作。

简单操作：

 <div v-if = "flag">flag的开关打开了</div>

在flag：true时显示模块，否则不显示。

另一个用于条件性展示元素的选项是v-show指令。

v-show条件性展示

   <p v-show="flag">我是独立的v-show</p>

v-if 和v-show的区别：

v-if是真正的条件渲染，打开控制台可以看到，如果不满足的条件语句，直接在html中删除了，不显示。

v-show是基于css的，不满足条件时只是 设置了style = ‘siplay:none’ ，只是在农二和block之间进行切换。

v-if有较高切换开销就是要删除添加，v-show有较高初始渲染开销，css中始终被渲染。如果需要频繁切换，则使用v-show性能比较好。

3.列表渲染

v-for把一个数组映射为一组元素

可以基于一个数组渲染一个列表。v-for 指令需要item in items形式的语法，类似foreach循环。

 <ul>
      <!-- 渲染集合 -->
      <li v-for="item in newsList">{{item}}</li>
  </ul>

这是vue的就地渲染策略，当集合内部元素发生变化，添加或删除后，不用全部再渲染一遍。这样可以有效减少需要消耗的性能。想要实现这种局部渲染，要给item提供唯一索引，根据这个唯一索引来判定item的内容有没有发生变化。

4.监听事件

可以使用v-on指令（通常简写为@符号）来监听dom事件，在触发事件时执行javascript语句。

用法为：v-on: click = "methodName"或者 @click = "methodName"

比如加1按钮：

   <p>数量：{{ count }}</p>
   <button v-on:click="count+=1" >数量加一</button>
    <button @click="count-=1" type="button" >数量减一</button>

data(){
count=0,
}

事件处理方法：

许多事件的处理逻辑比较复杂，因此在这里可以直接接受方法名称来调用方法。

@click = "withdraw"

事件中读取data的属性，是需要通过this.属性来获取的。

<button @click="withdraw">撤回</button>
<p>{{msg}}</p>
...
methods:{
 withdraw(){
this.msg="xxx撤回了一条消息"    //msg是在data中的元素。
  }      

事件传递参数：

在事件中也可以传递参数到函数中，再对这些参数进行逻辑处理。

比如： UserList:[“jack”,“Alan”,“张三” ],

渲染的过程中将item的值也传递到了methods中进行操作。

<li @click="getUserName(item)" v-for="(item,index) in UserList" key="index">{{ item }}</li>
//methods中：
getUserName(item){
    alert(item);
  }

5.表单的输入绑定

Vue表单输入绑定相比其他框架而言更加简单易用。

双向数据绑定：既可以获取，又可以设置

<template>
  <div class="hello">
  <!-- 设置 -->
  <input v-model="UserName" type="text" name="name" id="name">
  <!-- 读取 -->
   <p>{{ UserName }}</p>

   <input v-model="Pwd" type="text" name="name" id="name">
   <p>{{ Pwd }}</p>
   <button @click="getUser">获取用户名</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
data(){
  return{
	UserName:"",
	Pwd:"",    
  		}
},
  methods:{
    getUser(){
      alert(this.UserName);
    }
  }
}
</script>

v-model的修饰符

lazy修饰符，加入后不会立刻同步获取，在回车或失去焦点的时候才会获取。可以降低消耗。

trim修饰符，加入后会删掉前后不需要的空格。

6.组件基础

Vue是组件化开发，把一个个业务模块分成一个个组件，解耦。

一个.Vue就是一个组件，是一种特殊的文件格式。

一个组件一般包含3个部分：

1. template 模板，相当于html的部分。
2. script 脚本，写逻辑交互的部分。
3. style css层叠样式表，设置外观。

加载组件的流程

引入组件

app.vue 是所有组件的根组件。在其中的script标签下引入需要的组件。

import Mycomponent from "./components/Mycomponent.vue"

挂载组件

export default {
  name: 'App',
  components: {
    Mycomponent
  }
}

将自定义组件挂载到components中。

显示组件

在App.vue的template标签中加入

<Mycomponent/>

以标签的形式将自定义的组件放到App.vue中，就可以显示组件了。

tip：添加了scoped 属性的css：

scope表示领域、范围。

在style中添加此属性表示当前样式只在当前组件中生效。如果想要全局共享样式，就不要加scoped属性，如果只是希望在当前组件生效就加入scoped属性。

组件的组织

App.vue引入的组件还可以引入其他组件，形成一个树的结构，App.vue在最上层。

7.Porps组件的交互

组件与组件之间是需要存在交互的，否则就没有了意义。

porps可以在组件上注册的一些自定义属性，可以决定组件之间进行数据的传递。

<!-- App.vue中：-->
 <Mycomponent :title="title" />
...
  data(){
    return{
      title:"标题"
    }

接受传过来的数据：

<h3>{{ title }}</h3>
...
props:{
        title:{
            type:String,
            default:""
        }
    }
... 

渲染：

数组和对象必须使用函数进行返回：

App.vue中定义一个对象:

 User:[
        {id:1,name:"liu"},
        {id:2,name:"zhangsan"}
      ],  

Mycomponent中接收对象：

 <p v-for="item in User" :key="item.id">{{item.name }}</p>
 ...
 props:{
  User:{
            type:Array,
            default:function(){
                return [];
            }
        }
   }

8.自定义事件组件交互

自定义事件可以在组件中反向传递数据，prop是将父组件传到子组件中，
子传父可以用$emit来传递

<div>
    <button @click="sendData">传递数据到父组件</button>
</div>

methods中定义传递数据的函数。

  methods:{
        //两个参数,第一个是参数,第二个是要传递的数据元素
        sendData(){
            this.$emit("onEvent",this.Msg)
        }
    }

点击按钮时发送数据到父组件，因此要绑定父组件接收数据的方法：

 <Mycomponent :title="title" :User="User"  @onEvent="getData"/>

同样在methods中实现方法：

  methods:{
      getData(data){
        alert(data);
      }
  }

运行后点击数据传递按钮：

以下是父组件和子组件的代码:

 <!-- 父组件 App.vue -->
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <!-- @onEvent="getData",定义的函数来接收数据 -->
  <Mycomponent :title="title" :User="User"  @onEvent="getData"/>
</template>

<script>
import Mycomponent from "./components/Mycomponent.vue"

export default {
  name: 'App',
  components: {
    Mycomponent
  },
  data(){
    return{
      title:"标题",
      User:[
        {id:1,name:"liu"},
        {id:2,name:"zhangsan"}
      ],
    }
  },
  methods:{
      getData(data){
        alert(data);
      }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<!-- 子组件 Mycomponent.vue -->
<!-- 模板,相当于html -->
<template>  
<div>
    <h3>自定义事件传递数据:</h3>
    <h3>{{ title }}</h3>
    <ul>
        <li v-for="item in User" :key="item.id">{{ item.name }}</li>
    </ul>
</div>
<div>
    <button @click="sendData">传递数据到父组件</button>
</div>
</template>
<!-- js -->
<script>
export default{
    name:"Mycomponent",
    props:{
        title:{
            type:String,
            default:""
        },
        User:{
            type:Array,
            default:function(){
                return [];
            }
        }
    },
    data(){
        return{
            Msg:"这是子组件中的数据"
        }      
    },
    methods:{
        //两个参数,第一个是参数,第二个是要传递的数据元素
        sendData(){
            this.$emit("onEvent",this.Msg)
        }
    }
}
</script>

<!-- css -->
<style > 
h3{
    color:blue;
}
</style>