vue2的一些比较重要的知识点(1)_vue中不常用但比较重要的点-CSDN博客

本文链接：https://blog.csdn.net/Chengxuniao/article/details/123083088

本文聚焦Vue2中的重要知识点，详细介绍了watch监听器的用法，展示了如何在值变化时响应更新。同时，文章提及了Vue的生命周期函数，并推荐了之前关于此话题的博客链接。此外，还探讨了模板、Vue时间及语法，包括数据绑定、元素选择器`el`、`v-html`、`v-bind`指令的使用，以及模板中{{}}变量插值的原理。

摘要由CSDN通过智能技术生成

文章目录

watch
生命周期函数
模板 vue时间以及语法

watch

watch是监听器，用于值变化时，可以查询监听
以代码来看：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	{{a}}
</div>

<script type="text/javascript">
var data = { a : 1 };
var vm = new Vue({
	el   : "#app",
	data : data
});

vm.$watch('a', function(newVal, oldVal){
	console.log(newVal, oldVal);
})

vm.$data.a = "test...."

</script>

</body>
</html>

在控制台将会是：
在这里插入图片描述
就会看到能够看见他的新值和旧值。

生命周期函数

这个我之前的博客讲过。可以看下面的链接。
https://blog.csdn.net/Chengxuniao/article/details/122984940

模板 vue时间以及语法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        {{msg}}
        <p>Using mustaches:{{rawHtml}}</p>
        <p v-html="rawHtml"></p>
        <div v-bind:class="color">test...</div>
        <p>{{number+1}}</p>
        <p>{{1==1? 'YES':'NO'}}</p>
        <p>{{message.split('').reverse().join('')}}</p>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "hi vue",
                rawHtml: '<span style="color:red">this is should be red</span>',
                color:'red',
                number:10,
                message:"vue"
            }
        })
    </script>
    <style type="text/css">
        .red{color: red;}
        .blue{
            color: blue;
            font-size: 100px;
        }
    </style>
</body>

</html>

运行结果为：
在这里插入图片描述
这个vue.js的文件包含了许多库和函数，有需要的兄弟们可以来下载一下。
链接：https://pan.baidu.com/s/1j2gB68Tb_InbrSfh8W86SA
提取码：1234
这个js css的排版就是这样。
首先在<head></head>标签里面加入js的文件地址，并设置属性格式以及字体的属性，防止乱码。
在<body></body>中加入js和css ，具体情况看上述代码为例。
大家在里面也能看到data:{},这个是返回数据。可以在里面加入某些变量的值。这也是一种排版，方便使用和观看。
el指的是节点，如果学过原生框架的css知识，都知道选择器，选择器就是一种节点，就像人的名字一样，通过名字来确定人。
v-html是把后面的属性值当成html代码进行编译运行。
v-bind是绑定事件。可以在代码中看到使用v-bind这一行代码，如果把red改成blue，那么就会实现.blue的代码样式。
{{}}这个表示一种变量，如果只是没有加，就不会生成变量的值，而是原封不动的打印出具体的式子。