vue2.0介绍以及网页版vue环境搭建

一、Vue.js 是什么

• Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、安装vue

1、独立版本

• 我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 < script> 标签引入。

2. 使用 CDN 方法

• 使用vue的cdn搭建静态网页版的开发环境
• 引入远程的cdn—https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js
• 以script的方式引入
• <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

3、NPM 方法

• 在搭建vue的开发环境中提到

三、网页版vue环境搭建

• id="app"的元素作为vue框架渲染元素

    <div id="app">
        <input type="text" v-model="msg">
        {{msg}}
    </div>
    <script>
        //创建vue的实例对象
        let vue=new Vue({
            el:'#app',//渲染的元素
            data:{
                msg:"hello world!"
            },
            methods:{

            }
        });
        console.log(vue);//输出整个vue对象
    </script>

• el：生态系统渲染的元素
• data：生态系统的数据源(用于定义属性，实例中有三个属性分别为：site、url、alexa)
• methods：定义使用的方法(用于定义的函数，可以通过 return 来返回函数值)
• {{}}：数据模板指定绑定数据的(用于输出对象属性和函数返回值)
• v-model指令：针对表单元素进行双向绑定的指令