Vue快速入门、安装、双向绑定与事件处理、生命周期和钩子函数、普通函数

一、概念

在这里插入图片描述

2.快速入门

创建一个新的工程；选择静态web类型工程：
在这里插入图片描述

2.1安装vue

使用npm安装vue.js：
在这里插入图片描述 save代表局部安装

2.2双向绑定与事件处理快速入门演示

在这里插入图片描述在项目目录直接新建一个HTML文件 01-demo.html：

在这里插入图片描述

在这里插入图片描述
vue_day1/01_vuedomeo.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue01测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="num"><button v-on:click="num++">点我</button>
    <h2>{
   
   {name}} 非常好!</h2><h2> 有{
   
   {num}}个酷炫学科</h2>

</div>
<script type="text/javascript">
    var app1=new Vue({
     
     
        el:"#app",   //el即element，要渲染的页面元素
        data:{
     
     
            name:"喜洋洋",
            num:1
        }
    })
</script>
</body>
</html>

在idea点右边浏览器按钮即可运行：
在这里插入图片描述
首先通过 new Vue()来创建Vue实例
然后构造函数接收一个对象，对象中有一些属性：
el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div
data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
name：这里指定了一个name属性
页面中的 h2 元素中，通过{ {name}}的方式，来渲染刚刚定义的name属性

在data添加了新的属性： num
在页面中有一个 input 元素，通过 v-model 与 num 进行绑定。
同时通过 { {num}} 在页面输出
可以观察到，输入框的变化引起了data中的num的变化，同时页面输出也跟着变化。
input与num绑定，input的value值变化，影响到了data中的num值
页面 { {num}} 与数据num绑定，因此num值变化，引起了页面效果变化。
没有任何dom操作，这就是双向绑定的魅力。

这里用 v-on 指令绑定点击事件，而不是普通的 onclick ，然后直接操作num
普通onclick是无法直接操作num的。

三、生命周期和钩子函数、普通方法

在这里插入图片描述普通函数：
click后面直接写"方法名"即可，不用()

在这里插入图片描述

下面来演示普通函数和钩子函数：
设置这个钩子函数才不会报错：

扫描二维码关注公众号，回复： 12514086 查看本文章

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>钩子函数</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app2">
    <button v-on:click="add">点我</button>
    <br>
    {
   
   {msg}}
</div>
<script type="text/javascript">
    var app1=new Vue({
     
     
        el:"#app2",   //el即element，要渲染的页面元素
        data:{
     
     
            //初始化为空
            msg:""
        },
        //普通函数
        methods:{
     
     
            add:function () {
     
     
                console.log("点我了，...123")
            }
        },
        //钩子函数
        created(){
     
     
            this.msg="hello vue .created";
        }
    });
</script>
</body>
</html>

在这里插入图片描述