Vue.js的基本使用

  • 1.MVVM 模式
  • 2. Vue概述
  • 3. IDEA中构建Vue项目
  • 4. Vue简单实例(实现双向绑定)
  • 5. Vue的钩子函数
  • 6. Vue常用 指令
  • 1. 插值表达式：
  • 2. v-text和v-html指令的使用
  • 3. v-model指令：
  • 4. v-on指令
  • 5. 事件修饰符
  • 6. v-for指令
  • 7. v-if 和 v-show 指令
  • 8. v-bind指令
  • 7.watch基本和深度监控
  • 8. Vue实现ajax请求(axios)


1.MVVM 模式

MVVM是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。

2. Vue概述

Vue是一款前端渐进式框架，自底向上逐层应用，可以大大提高前端开发效率。

3. IDEA中构建Vue项目

首先在终端输入命令：npm init -y初始化项目，然后再在当前文件目录下打开cmd输入命令npm install vue --save 引入vuejs资源。

JavaScript vue在线运行_html

4. Vue简单实例(实现双向绑定)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{name}}</h1>
        <input type="text" v-model="num">
        <h1>{{num}}</h1>
        <button v-on:click="num++">点我加1</button>
    </div>
    <script type="text/javascript">
        let app = new Vue({//生成Vue实例
            el:"#app",//指定模板id
            data:{  //绑定数据
                name:"hello vue",
                num:1
            }
        });
    </script>
</body>
</html>

效果如下：

JavaScript vue在线运行_html_02

5. Vue的钩子函数

以created()函数为例: 相当于初始化数据。

<div id="app">
        <h1>{{name}}</h1>
        <input type="text" v-model="num">
        <h1>{{num}}</h1>
        <button v-on:click="num++">点我加1</button>
    </div>
    <script type="text/javascript">
        let app = new Vue({
            el:"#app",
            data:{
                name:"",
                num:1
            },
            //钩子函数:在Vue的各个生命周期阶段自动调用
            //beforeCreate created beforeMount mounted updated beforeUpdate destroyed beforeDestroyed
            created(){//初始化数据
                //this表示vue实例
                this.name = "ni hao !!!" ;
                this.num = 10;
            }
        });
    </script>

6. Vue常用 指令

1. 插值表达式：
{{}}   支持js语法，可调用有返回值的js函数；可以直接获取Vue实例中定义的数据或函数。
2. v-text和v-html指令的使用
v-text直接展示数据的文本信息，v-html会解析html标签。
<div id="app">
        v-text:<span v-text="name">{{name}}</span><br>
        v-html:<span v-html="name">{{name}}</span>
    </div>
    <script type="text/javascript">
        let app = new Vue({
            el: "#app",
            data: {
                name: "<h1>hello vue!</h1>",
            }
        });
    </script>

效果：

JavaScript vue在线运行_js_03

3. v-model指令：
实现视图和模型的双向绑定，v-model可用的元素标签：input、select、textarea、checkbox、radio、components(Vue自定义组件)。
<div id="app">
        <input type="checkbox" value="java" v-model="language">java<br>
        <input type="checkbox" value="python" v-model="language">python<br>
        <input type="checkbox" value="c++" v-model="language">c++<br>
        <h2>{{language.join(",")}}</h2>
    </div>
    <script type="text/javascript">
        let app = new Vue({
            el: "#app",
            data: {
                language:[]//数组
            }
        });
    </script>

JavaScript vue在线运行_vue_04

4. v-on指令
作用：	给页面元素绑定事件	
	格式:	v-on:事件名="js片段或函数名"
			或 @事件名="js片段或函数名"
<div id="app">
        <button v-on:click="num++">增加</button>
        <button @click="decrement">减少</button>
        <h1>{{num}}</h1>
    </div>
    <script type="text/javascript">
        let app = new Vue({
            el: "#app",
            data: {
                num:1
            },
            methods:{
                decrement(){
                    this.num--;
                }
            }
        });
    </script>
5. 事件修饰符
用于事件的后面	
	 如 @click.stop  @click.prevent
  • .stop: 阻止事件冒泡
  • .prevent: 阻止默认事件发生（如超链接）
  • .capture：使用事件捕获模式
  • .self：只有元素自身触发事件才执行
  • .once：只执行一次
6. v-for指令
遍历显示数据。
<div id="app">
        <ul>
            <li v-for="user in users">
                {{user.name}}--{{user.age}}--{{user.sex}}<br>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        let app = new Vue({
            el: "#app",
            data: {
                users:[
                    {"name":"zhangsan","age":13,"sex":"male"},
                    {"name":"lisi","age":15,"sex":"male"},
                    {"name":"wangwu","age":18,"sex":"male"}
                ]
            },
        });
    </script>

结果：

JavaScript vue在线运行_html_05

7. v-if 和 v-show 指令
使用方法：v-if="布尔表达式"  v-else-if="" v-else；
			  v-show="布尔表达式" 在条件不满足时对元素进行隐藏(但仍会显示标签)。
8. v-bind指令
作用：可用Vue中的数据替代元素的属性。	
	例如：<img v-bind:src="Vue中的数据属性">
	简写：<img :src="Vue中的数据属性">

7.watch基本和深度监控

<div id="app">
        <input type="text" v-model="message">
    </div>
    <script type="text/javascript">
        let app = new Vue({
            el: "#app",
            data: {
                message:"zhangsan"
            },
            watch:{
                message(newValue,oldValue){
                    console.log("newValue:"+newValue+"oldValue:"+oldValue);
                }
            }
        });
    </script>

8. Vue实现ajax请求(axios)

axios：使用命令 npm install axios安装，常用方法：get、post。

<div id="app">
       <ul>
           <li v-for="user in users">
               {{user.name}}--{{user.age}}--{{user.sex}}<br>
           </li>
       </ul>
   </div>
   <script type="text/javascript">
       let app = new Vue({
           el: "#app",
           data: {
               users:[]
           },
           created(){
               axios({
                   url:"data.json",
                   method:"get"
               }).then(res=>{
                   //不能使用this，在axios回调中表示窗口，不是vue实例
                       console.log(res);
                       app.users = res.data;
                   }
               ).catch(err=>alert(err))}
       });
   </script>

data.json

[
  {"name":"zhangsan","age":13,"sex":"male"},
  {"name":"lisi","age":15,"sex":"male"},
  {"name":"wangwu","age":18,"sex":"male"}
]