Vue简单入门

1、cdn方式导入Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

加入代码就可以。

示例：

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "hello!",
            ok: true,
            type: 'A'
        }
    });

    var v1 = new Vue({
        el:"#vue" ,
        data:{
            items: [
                {message: "hello"},
                {abc: "abc"}
            ]
        }
    });
</script>

2、Vue如何做到绑定数据

1、首先一个div ，需要展示一条字符串，变量名为message, {{}}为取值操作

<div id = "app">
    {{message}}
</div>

2、现在有了值展示，值去哪里取呢？

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",			
        data: {
            message: "hello!",
        }
    });
</script>

el：绑定div的 id

data声明数据， message就是一会要展示的。

3、另一种取值方式

<div id = "app">
    <span v-bind:title="message">
    鼠标悬停在这里将显示message的值
    </span>
</div>

使用v-bind指令 绑定了message，也可以取值。

3、Vue如何绑定事件

在methods里声明具体的方法， 然后通过v-on：事件=“方法名”的方式绑定具体的方法。

当然在最前面要绑定Vue对象和dev id

<div id="app">
    <button v-on:click="Hello">click</button>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            Hello: function (){
                alert("hello");
            }
        }
    });
</script>

4、Vue基本语法

if判断

使用v-if 、 v-else 、 v-else-if 指令

<div id = "app">
	
    <h1 v-if="flag"> true</h1>
    <h1 v-else>false</h1>
    
    <h2 v-if="type==='A'"> A</h2>
    <h2 v-else-if="type==='B'"> B</h2>
    <h2 v-else> C</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            flag: true,
            type: 'A'
        }
    });
</script>

for循环

使用v-for 指令， 后面就像是加强for，可以添加index变量来取出下标

<div id = "vue" >
	<li v-for="item in items">
        {{item.message}}----{{index}}
    </li>
    
    <li v-for="(item, index) in items">
        {{item.message}}----{{index}}
    </li>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    
    var v1 = new Vue({
        el:"#vue" ,
        data:{
            items: [
                {message: "hello"},
                {message: "abc"}
            ]
        }
    });
</script>

5、双向绑定

定义:

当我们在页面输入了一些信息，或者是选择了一些东西，这个信息绑定到vue的data中，并且这个data对象能立刻应用显示在页面中的技术。

具体语法就是在组件中用v-model=“”绑定data中的具体对象

代码：

<div id="app">
   输入文本： <input type="text" v-model="message"> <br>
    输入的文本是：{{message}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "请输入"
        }
    })
</script>

效果如图下图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8ONgMLNE-1666859186373)(C:\Users\86182\AppData\Roaming\Typora\typora-user-images\image-20221023101652385.png)]

当在文本框中输入

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FvlJmrRu-1666859186375)(C:\Users\86182\AppData\Roaming\Typora\typora-user-images\image-20221023101739547.png)]

没有刷新页面，只是更改了输入框的内容，更改之后的内容就会同步更改在页面上。

redio的双向绑定

<div id="app">
   <input type="radio" value="男" v-model="message">男<br>
    <input type="radio" value="女" v-model="message">女<br>

    选择的是：{{message}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: ""
        }
    })
</script>

效果：

第一次加载页面：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XEfUMl1x-1666859186376)(C:\Users\86182\AppData\Roaming\Typora\typora-user-images\image-20221023102216782.png)]

点击选择之后：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xAHwuniq-1666859186376)(C:\Users\86182\AppData\Roaming\Typora\typora-user-images\image-20221023102258908.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RnFeS9Ah-1666859186377)(C:\Users\86182\AppData\Roaming\Typora\typora-user-images\image-20221023102316219.png)]

复选框的双向绑定

<div id="app">
   <select v-model="message">
       <option disabled value="">--请输入--</option>
       <option>A</option>
       <option>B</option>
       <option>C</option>
   </select>

    选择的是：{{message}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: ""
        }
    })
</script>

注意：–请输入–这个的作用是为了刷新页面之后依然能够点击选择

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xk5ovooF-1666859186378)(C:\Users\86182\AppData\Roaming\Typora\typora-user-images\image-20221023102716696.png)]

6、自定义组件

1、组件其实就是一个模板，然后在页面上调用这个组件，就会显示模板里边内容

组件的定义：

Vue.component(“组件名字”, {组件对象}); props用来接收数据， templat里面写组件

  Vue.component( "heComponent",{
      props: ['temp'],
      template: '<li>{{temp}}</li>'
  });

应用例子

<div id="app">
    {{message}}
    
    <heComponent v-for="item in items" v-bind:temp="item"></heComponent>   //这个是错误示范，如果组件定义命名为小驼峰式，调用就要用-分割单词
    
    <blog-post v-bind:title="message"></blog-post>
    
    <he-component  v-for="item in items" v-bind:temp="item"></he-component>		//正确示范
</div>




<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>

	//小驼峰命名的组件
  Vue.component( "heComponent",{
      props: ['temp'],
      template: '<li>{{temp}}</li>'
  });

  Vue.component('blog-post', {
      props: ['title'],
      template: '<h3>{{ title }}</h3>'
  })


  var vm = new Vue({
    el: "#app",
    data: {
        message: "canGet",
        items: ["hello", "I", "am", "haoshui"]
    }
  });


</script>

7、Axios异步通信

文件目录结构：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jwZ0RS5B-1666859186379)(C:\Users\86182\AppData\Roaming\Typora\typora-user-images\image-20221023162214362.png)]

代码（获取data.json数据返回给页面）

<div id="app">
    {{info.name}}
    {{info.address.province}}

</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data(){
          return{
              info:{
                  name: null,
                  address: {
                      city: null,
                      province: null
                  }
              }
          }
        },
        mounted(){
            axios.get("./data.json").then(response=>{this.info=response.data});
        }
    });

</script>

8、computed属性

定义:

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

理解：

computed属性类似methods， 都是写函数进行操作计算，methods中的方法会在每次需要数据的时候都重新计算一次，computed属性里的方法会在第一次调用之后将结果存在缓存中，如果数据没有变化，那么就不会更改缓存中的数据，当下一次需要这个数据的时候，就不需要再次执行函数，而是从缓存中直接返回数据。

相关语法：

        computed: {
            Time:function () {
                this.message;
                return Date.now();
            }
        }

例子：

<div id = "app">
    {{Time}}<br>
    {{TimeMethod()}}
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        computed: {
            Time:function () {
                return Date.now();
            }
        },
        methods: {
            TimeMethod: function (){
                return Date.now();
            }
        }
    });
</script>

因为date是会一直更新的，所以只要刷新页面，Time属性就会改变。但是在控制台里面持续的输出Time就不会有改变，因为Time已经存在缓存里了，就不会调用函数。如果是定义在methods中，在控制台里调用值就会改变。

**提示：如果感觉不太理解，把代码复制运行一遍，体验体验 **

在控制台中调用TimeMethod

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-apofYsGm-1666859186379)(C:\Users\86182\AppData\Roaming\Typora\typora-user-images\image-20221023165841570.png)]

在控制台中输出Time

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lhD29bXP-1666859186381)(C:\Users\86182\AppData\Roaming\Typora\typora-user-images\image-20221023165934791.png)]

9、Webpack

作用

因为Vue开发是面向Es6标准的， 但是大部分浏览器还是html5标准，所以说在编译的时候需要把开发环境的版本降级，webpack就可以做这个。

10、实战

1、创建项目

新创建一个文件夹， 在文件夹里面运行cmd

输入指令 test为项目名称

npm init webpack test

之后会弹出一些选项

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NyflT9iF-1666859186383)(C:\Users\86182\AppData\Roaming\Typora\typora-user-images\image-20221024175121854.png)]

确定就回车，否定就输入n。

然后需要进入项目目录

安装vue-router

cnpm install vue-router

安装 element-ui

npm i element-ui -S

安装依赖

npm install

安装sass

cnpm install sass-loader node-sass