vue初学——vue数据与方法

最新推荐文章于 2023-04-23 14:25:50 发布

java-cp

最新推荐文章于 2023-04-23 14:25:50 发布

阅读量623

点赞数 1

分类专栏：前端文章标签： vue js

本文链接：https://blog.csdn.net/cp1820957097/article/details/114963405

版权

前端专栏收录该内容

9 篇文章 2 订阅

订阅专栏

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

上次说到vue的学习，不需要先安装cli和webpack
现在我们按照官网的引导搭建自己的学习页面

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
        <div id="app">
            {{message}}
        </div>
        
        <script type="text/javascript">
            var app=new Vue({
                el:'#app',
                data:{
                    message:'hello vue!'
                }
            });
        </script>
    </body>
</html>

网页上直接访问该文件的目录D:/dev/code1/vue learning/test1.html

当当当，出来啦！

后面我们将在这个文件上继续扩展学习接下来的数据与方法。

上面代码块中message的信息显示，被双括号（{{…}}）包裹，其实就是模板语法的标识。
ps：我在搭建这个简单的页面的时候，没有好好的去阅读官网的步骤，大致读了之后发现如此简单，立马开干就上手去写了HTML文件，然后在浏览器访问后，一直显示{{message}}}，我当时搞了好一会儿觉得是不是vue没有引进来啊，HTML的一些标签没写好啊。。。最后发现div块上的id没写，vue在初始化dom的时候，找不着地方，当然不会讲数据显示出来了，晕死。。。

数据

为了更直观的看到数据的绑定初始化，我将自己项目中通常用到的例子贴出来
将body标签中的显示稍微改动下

<body>
    <div id="app">
        {{message}}{{number}}
        <button v-on:click="change()">点我</button>
    </div>
    <script type="text/javascript">
        var data = {
            message:'hello vue!',
            number:0
        }
        var app=new Vue({
            el:'#app',
            data:data,
            methods:{
                change(){
                    data.number += 1;
                }
            }
        });
    </script>
</body>

访问链接，number的初始化为0
在这里插入图片描述
点击“点我”，我们会发现number的数据会随着每次点击增加1。

这里就涉及到vue的dom初始化，我们再vue实例外定义了data对象，然后在初始化vue的时候，vue就将外面的data加载到vue实例面。在我们修改data对象时（data是vue实例中的一个属性），vue绑定的元素值就会跟着进行改变。
当一个Vue实例被创建时，它将data 对象中的所有的属性加入到Vue的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值，即双向绑定。
如果我们把外层的data对象去掉，将其中的属性直接贴到vue中的data后面，如下：

<script type="text/javascript">
	var app=new Vue({
       el:'#app',
       data:{
           message:'hello vue!',
           number:0
       },
       methods:{
           change(){
               data.number += 1;
           }
       }
   });
</script>

然后再次刷新页面，我们再点击按钮，发现数字没有发生变化。这说明这个data.number它不生效了。
F12看下，发现报了如下的错，data未定义
在这里插入图片描述
那就说明了 vue的实例中没有data这个属性，但是有number这个属性，如果把data换成app，那它就能生效了。

方法

这里先说一下freeze()这个方法，这个方法在官网教程里也有说明，就是凡被这个方法锁定的变量初始化后无法进行改变

然后，就是watch()这个方法，主要是监听实例中属性发生变化的，可在变化前，变化后怎么处理自己需要的业务。

当然了，这里还有其他的方法，如：
mounted()——在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
create()——在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

等等。。。

java-cp

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue初学——vue数据与方法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。...
复制链接

扫一扫