vue一小时入门

1、Vue.js是什么？

vue就是一个js库，核心只关注视图层。

2、为什么使用？

• 声明式，响应式的数据绑定
• 组件化的开发

3、MVVM模式

vue的核心是mvvm模式， mvvm是Model-View-ViewModel的简写。

Model：【模型】指的是传递的数据。

View：【视图】指的是页面。

ViewModel：【视图模型】mvvm模式的核心，它是连接【视图】和【模型】的桥梁。

它有两个方向：

一是将【模型】展示到【视图】，即将数据展示到页面。实现的方式是：数据绑定。

二是将【视图】转化成【模型】，即将页面转化成数据传递到后端。实现的方式是：DOM 事件监听。

这两个方向都实现的，称之为数据的双向绑定。

4、Vue入门

<!--html中引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<div id="app">
		{{ message }}
</div>
<script>
var app = new Vue({
    el: '#app',
    data: {
    message: 'Hello Vue!'
    }
})

</script>

• 视图 <div id=”app”></div>
• 视图模型 new Vue() ( el: ‘#app’：绑定视图 )
• 模型 {message: ‘Hello Vue!’}

5、常用指令

• V-if

<div id="app">
		{{ msg}}
		<div v-if="info">测试V-if</div>
</div>
<script>
new Vue({
    el: "#app",
    data:{
    msg: 'hello world',
    info: true
    }
})
</script>

• V-else

<div id="app">
    <div v-if="age<=10">小于等于10</div>
    <div v-else>大于10</div>
</div>

<script>
    new Vue({
        el: "#app",
        data:{
        age: 10
        }
     })
</script>

• V-else-if

<div id="app">
    <div v-if="age<=10">小于等于10</div>
    <div v-else-if="age>10 && age<15">大于10并且小于15</div>
    <div v-else>大于15</div>
</div>

<script>
    new Vue({
        el: "#app",
        data:{
        age: 10
        }
    })
</script>

• V-for循环

<div id="app">
    <ul>
    <li v-for="(item, index) in list" :key="index">
    {{item.name}} {{item.age}}
    </li>
    </ul>
</div>

<script>
    new Vue({
        el: "#app",
        data:{
            list:[
              {name: '张三',age:10},
              {name: '李四',age:15}
            ]
        }
    })
</script>

• V-show 判断是否显示

<div id="app">
    {{ msg}}
    <!-- info为false时，不会加载标签 -->
    <div v-if="info">测试V-if</div>
    <!-- info为false时，会加载标签，并隐藏 -->
    <div v-show="info">测试v-show</div>
</div>

<script>
    new Vue({
        el: "#app",
        data:{
        info: true
        }
    })
</script>

• V-model 数据双向绑定

<div id="app">
    <!-- v-model：双向绑定有value属性的标签。变量：datafrom.name-->
    <input v-model="datafrom.name">
    <input v-model="datafrom.age">
</div>

<script>
    new Vue({
      el: "#app",
      data:{
      datafrom:{
          name:'',
          age:''
      }
      }
    })
</script>

• V-bind绑定属性

<div id="app">
    <!-- v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，-->
    <!--这个参数通常是HTML元素的特性（attribute），例如：v-bind:class-->
    <div v-bind:style="color">绑定style</div>
    <div v-bind:class="{aa : info}">绑定class</div>
    <!--简写语法-->
    <div :style="color">绑定style</div>
    <div :class="{aa : info}">绑定class</div>
</div>

<script>
    new Vue({
        el: "#app",
        data:{
        datafrom:{
            color: {
            color: 'red'
        },
        info:true
        }
        }
    })
</script>
<style>
    .aa{
    color: aqua;
    }
</style>

• V-on 绑定事件

<div id="app">
    <input type="button" v-on:click="infoClick" value="点击事件">
    <!--简写语法-->
    <input type="button" @click="infoClick" value="点击事件1">
</div>

<script>
    new Vue({
        el: "#app",
        data:{
        },
        methods: {
            //定义函数
            infoClick(){
            console.log('123456');
            }
        }
    })
</script>

6、Vue实例 生命周期钩子

<div id="app">
</div>

<script>
    new Vue({
        el: "#app",
        data:{
        },
        // 自定义函数属性
        methods: {
            infoClick(){
            console.log('123456');
            }
        },
        //vue实例化之后调用
        created: function () {
            // `this` 指向 vm 实例
            console.log('vue实例化之后调用')
        },
        // 文档就绪事件
        mounted(){
            console.log('文档就绪事件')
            this.infoClick()
        }
    })
</script>

7、计算属性和侦听器

<div id="app">
    语文<input v-model="yuwen">
    数学<input v-model="shuxue">
    英语<input v-model="yingyu">
    总分：<div>{{ zongfen }}</div>
    总分：<div>{{ zongfen }}</div>
</div>

<script>
    new Vue({
        el: "#app",
        data:{
          yuwen: 0,
          shuxue: 0,
          yingyu:0,
        },
        methods: {
        },
        // 计算属性
        computed:{
            zongfen(){
            return parseFloat(this.yuwen)+parseFloat(this.shuxue)+parseFloat(this.yingyu);
        }
        }
    })
</script>

8、组件

• 组件注册

<div id="app">
    <!--全局组件使用-->
    <hello> </hello>
    <!--局部组件使用-->
    <hello1> </hello1>
</div>

<script>
    // 注册全局组件
    Vue.component("hello",{
        data(){
            return {
               msg: 'HelloWorld'
            }
        },
        template: '<div>{{ msg }}</div>'
        })
        //局部组件
        var hello1={
            data(){
                return {
                		msg: 'hello1'
                }
            },
            template: '<div>{{ msg }}</div>'
    }
        
    new Vue({
        el: '#app',
        data:{
            arr:["张三",'李四'],
            student:{
            name: '张三',
            age:19
        },
        count: 0
        },
        //局部组件注册 两种写法效果一致
        components:{
            // 'hello1':hello1
            hello1
        }
    })
</script>

• 组件自定义属性（父子组件之间 “传值”）

<div id="app">
    <!--全局组件使用 普通字符串不需要v-bind 。 数字、变量、布尔类型、对象、数组需要v-bind，例：:title="123"-->
    <hello type="张三" :title="123" :list="arr" :student="student" info="aaaa"> </hello>
</div>

<script>
    // 注册全局组件
    Vue.component("hello",{
    data(){
        return {
        		msg: 'HelloWorld'
        }
    },
    //组件定义属性 只定义名称
    // props:['type','title'],

    //组件定义属性 （定义名称带类型、以及限制）
    props:{
        type: String,
        title: [Number,String],
        list: Array,
        student: {
        type: Object,
        required: true,
        },
        info:{
            type:String,
            default:'info'
        }
    },
    template: '<div>{{ msg }}</div>'
    })

    //局部组件同理。。

    new Vue({
        el: '#app',
        data:{
            arr:["张三",'李四'],
            student:{
            name: '张三',
            age:19
        },
        count: 0
        },
        		//局部组件注册 两种写法效果一致
        components:{
            // 'hello1':hello1
            hello1
        }
    })
</script>

• 监听子组件事件（子组件传值到父组件）

<div id="app">
    <!--全局组件使用 监听自定义事件名称aa ，并获取传递值-->
    <!--触发父组件info函数， $event获取传递的值2-->
    <hello @aa="info($event)"> </hello>
</div>

<script>
    // 注册全局组件
    Vue.component("hello",{
        data(){
            return {
           		 msg: 'HelloWorld'
            }
        },
        methods: {
        clicks(){
            //通过调用内建的 $emit 方法，并传入事件名称来触发这个事件
            //aa：自定义事件名 2：额外传递一个值，也可以不传
            this.$emit("aa",2)
        }
        }
        template: '<div> <input type="button" @click="clicks"> </div>'
    })


    new Vue({
        el: '#app',
        data:{
        },
        methods: {
            info(val){
                //接收子组件传递的值
                console.log(val);
            }
        }
        //局部组件注册 两种写法效果一致
        components:{
        }
    })
</script>