第一天(Vue的介绍、使用，Vue对象，属性绑定)

第一天(Vue的介绍、使用，Vue对象，属性绑定)

主要在腾讯课堂的课程上学习的，这是对视频中的一些概括总结
我们从vue.js官网出发，来进行学习。

Vue的介绍

从官网主页来看，vue是一个渐进式JavaScript框架，渐进式：易用、灵活、高效，可以说是没有太多限制的框架，也就是在使用这个框架的同时你也可以去使用其他的框架，没有太多的限制，不会有太多固定的规则。

vue的使用（安装）

两种方式：

• CDN方式：直接使用script标签引入，如
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
• 使用CLI,即脚手架，使用命令行工具
  

#全局安装vue-cli
$ npm install --global vue-cli  
# 创建一个基于 webpack 模板的新项目  
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev 

实例化Vue对象

我们使用CDN方式安装Vue：即<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>

我们首先在html页面中导入一个app.js文件，我们在这个js文件中写我们的vue代码，我们首先需要实例化一个vue对象

new Vue({
    el:"#vue-app",
    data:{
        a:0,
        b:"string",
        users:[{
            name:"A",
            age:18
            },
            {
            name:"B",
            age:20
            }]
    },
    methods:{
        addToA:function(){
            return this.a+2;
        }
    },
    comuted:{

    }
})

其中(上面的一些数据方法是一些示例,users是对象数组):
el: elment 需要获取的元素，一定是html中的根容器元素
data：用于数据的存储
methods:用于存储各种方法
computed:计算属性，在后面将会讲到；

在html界面中获取vue对象

在页面中安装vue步骤省略，直接进入获取部分

    <h1>初识Vue</h1>
    <!-- vue-app为根容器 -->
    <div id="vue-app1">
        {{a}}----{{addToA()}}
    </div>
    <script src="app.js"></script>

上面的代码执行之后的结果

在html中获取vue对象的属性是直接使用{{属性名}}的方式获取，其中方法是可以为其传参的，同时在方法中也可以使用this.a 去获取当前对象的a属性值。

属性绑定

有时候我们需要对标签进行操作，这时候就需要用到我们的属性绑定操作，我们首先来看示例,我们在上面的vue-app基础上添加两个属性website与websiteTag

website:"https://www.baidu.com",
websiteTag:"<a href='https://www.baidu.com'></a>"

在HTML页面中进行属性绑定：

<a v-bind:href="website">baidu</a>
<input type="text" v-bind:value="b">
<p v-html="websiteTag"></p>

执行结果：

结果分析：为标签的属性绑定值的时候使用v-bind:属性名=”属性”的语法，将vue对象中的属性值转换为DOM对象可以p v-html="websiteTag"></p>的类似语法。

因为vue是js的一个框架，我想那肯定也是符合js的语法的，既然这是一个对象，我想如果使用var a=new Vue({})应该是可以获取到这个对象的，经过试验，确实可以经过这种语法得到这个对象，而且在一个js文件中也可以新建多个vue对象，并且在html页面是可以为每一个Vue对象对应一个根容器的。

今天就先到这吧，也不知道写的怎么样，欢迎大家指正其中错误~~~