首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Vue学习(一)挂载点、模板与实例

Vue是近两年来比较火的一个前端框架(渐进式框架吧),与reactjs和angularjs三国鼎立。

Vue是什么,是一套构建用户界面的渐进式框架(官网解释),什么叫渐进式框架呢,简单回答就是主张最少,这些概念只能自己去看,自己去理解,一千个读者一千个哈姆雷特,不过多的解释。Vue的官方文档很全面的。

Vue两大核心思想,组件化和数据驱动,组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用,数据驱动是前端的未来发展方向,释放了对DOM的操作,让DOM随着数据的变化自然而然的变化(尤神原话),不必过多的关注DOM,只需要将数据组织好即可。

打开:https://cn.vuejs.org官网

找到学习下面的教程,然后选择安装

选择版本

我要用的是HBuilder,如果没有可以下载一个。

新建一个工程,引入我们下载好的Vue.js。

代码语言:javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Vue学习</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            姓:<input v-model="firstName" />
            名:<input v-model="lastName" />
            <div>{{fullName}}</div>
        </div>
    </body>
    <script>
        new Vue({
            el:"#root",
            data:{
                firstName:'',
                lastName:''
            },
            computed:{
                fullName:function(){
                    return this.firstName + ' '+ this.lastName
                }
            }
        })
    </script>
</html>

挂载点

el就是挂载点,element元素的意思,它的就是告诉实例要找页面上节点id为root的元素来插入替换;

模板

template 模板,就是插入到页面的内容,就是准备好的页面内容; 一般在工作中template是不写在实例里面,因为不好写,页面上id为root的div包含的内容默认就是template;

实例

new Vue() 创建出来一个实例,就是一个vue的组件;

大家可以看到挂载点,模板是写在实例里面,是实例的属性;

data,实例上的一些数据;

methods 实例上的方法;

改变data里的数据项this.xxx

vue的好处就是可以不要管dom,开发者可以把精力放在业务逻辑上面。

下一篇
举报
领券