Vue学习-2

1.2初始Vue

1.2.1 vue的引入

Vue虽然说是JavaScript框架，它的引入方式之一和引入js文件以及js库的方法一致，适合初学者

<script src='js/vue.js'></script>

 

vue.js文件可以从官网上下载

 

1.2.2 创建容器

创建一个容器，接收到vue返回的结果

<div id="root">
   Hello,{{name}}
</div>

这里的{{}}是vue的一种插值语法

 

1.2.3 创建Vue实例

<script>
    new Vue({
        el:"#root",
        data:{
            name:"vue"
        }
    })
</script>

其中实例Vue的时候需要传入一个对象

el:"#root" 的意思是 ，el(element)指定当前的Vue实例为id为root的div容器服务,值通常为CSS选择器字符串

同理，也和el:document.getElementById("root")相当

el:"#root" 更加简洁，易理解

所以在书写的时候建议以这样的格式书写

data中用于存储数据，数据供el指定的容器去使用，值先暂时写成对象

 

1.2.4 运行效果

将以上两个例子结合在一起，在网页上输出的结果是

Hello,vue

从以上例子分析总结一下，

• 想让Vue工作，就必须创建一个Vue实例，同时要传入一个配置对象

• root容器里的代码仍然复合HTML规范，只不过混合了一些特殊的Vue语法

• root容器里的代码被称为【Vue模板】