1-1 基本用法-第一个vue程序

目录：

  1. Vue.js简介
  2. 起步
  3. 安装vue-devtools
  4. 全局变量的配置
  5. 实例选项

一、Vue.js简介

1.1、Vue.js是什么？

  Vue.js也称为Vue，读音/vju:/，类似view，错误读音v-u-e，版本：1.0和2.0

  • 是一个构建用户界面的框架
  • 是一个轻量级的MVVM(Model-View-ViewModel)框架，和angular、react类似，其实就是所谓的数据双向绑定
  • 数据驱动+组件化的前端开发(****核心思想)
  • 通过简单的API实现***响应式的数据绑定***和***组合的视图组件***
  • 更容易上手、小巧

  参考：[官网](https://cn.vuejs.org/)

1.2、vue和angular区别

　angular：

  • 上手较难
  • 指令以ng-xxxx开头
  • 所有属性和方法都存储在$scope中
  • 由谷歌维护

　Vue：

  • 简单、易学、更轻量
  • 指令以 v-xxx开头
  • HTML代码 + JSON数据，再创建一个vue实例
  • 由个人维护: ***尤雨溪***，华人，目前就职于阿里巴巴，2014年2月开源了vue.js库

两者共同点：都不兼容低版本IE。

对比：Github上vue的stars数量大的是angular的两倍

二、起步

1、下载核心库vue.js

需要官网下载：https://cn.vuejs.org/v2/guide/installation.html

vue2.0 和 1.0相比，最大的变化就是引入了 Virtual DOM(虚拟DOM)，页面更新效率更高，速度更快

2、Vue实现

伪代码如下：

js:
    new Vue({
        el:'#itany', //指定关联的选择器
        data:{     //存储数据
            msg:'Hello world',
            name:'tom'
        }
    }) 
html:
    <div>
        {{msg}}  <!--两对大括号{{}}称为模板，用来进行数据的绑定显示在页面中-->
    </div>

3、第一个hello world的代码编写

<body>
    <!--创建view函数,view视图包裹一个容器-->
    <div id="box">
        <h1>{{ msg }}</h1>  <!--两对大括号{{}}称为模板，用来进行数据的绑定显示在页面中-->
    </div>
    <!--导入vue.js-->
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#box',    //指定关联的选择器
            data: {    //存储数据
                msg: 'hello word'
            }
        });
    </script>
</body>

三、安装vue-devtools

我们在调试vue的代码的时候，需要会给出提示，提示安装vue-devtools工具，提示如下：

所以我们需要安装vue-devtools工具以便我们日后调试vue代码使用。

1、访问vue-devtools的github地址：http://github.com/vuejs/vue-devtools(源码和安装步骤都有)  => 可以在百度里面直接搜索  插件小屋 即可，然后直接拖到 谷歌浏览器扩展程序中。

2、安装步骤如下(官方操作)：

Make sure you are using Node 6+ and NPM 3+

1.Clone this repo
(下载vue-devtools源代码)
2.cd vue-devtools the newly created folder
(解压zip文件到的vue-devtools中)
3.run yarn install
(执行 yarn install => npm install -g yarn)
4.then run yarn run build 
(然后执行 yarn run build)
5.Open the Chrome extension page (currently under Menu > More Tools > Extensions) 
(打开谷歌浏览器页面(当前下菜单 > 更多工具 > 扩展))
6.Check "developer mode" on the top-right corner 
(打开开发者模式)
7.Click the "load unpacked" button on the left, and choose the folder: vue-devtools/packages/shell-chrome/ 
(点击最左边 加载已解压的扩展程序，然后选择vue-devtools/packages/shell-chrome/)
8.Alternatilvely to step 3, you can also use yarn dev:chrome to build & watch the unpacked extension

3、安装成功之后

四、配置全局变量

1、配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false

 

 把图中的去除，如下：

<script src="js/vue.js"></script>
<script>
    //配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false
    Vue.config.devtools = false; //默认是true，生产环境要改成false
    new Vue({
        el:"#box",
        data:{
            msg:'hello word'
        }
    });
</script>

2、生产环境的提示，我不想要，去除提示

 

把图中的去除，如下：

<script>
    //生产环境的提示，我不想要，默认是true，改成false
    Vue.config.productionTip = false;//默认是true，生产环境要改成false
    new Vue({
        el:"#box",
        data:{
            msg:'hello word'
        }
    });
</script>

更多的 全局变量的设置请查看vue.js的api：https://cn.vuejs.org/v2/api/

五、实例选项

在Vue的实例中，有许多选项，现在我们来说明一下，这些选项：

//定义Vue实例
new Vue({
     el: "#box",
     data:{}, //数据绑定
     methods:{}, //定义方法
     filters:{}, //定义局部过滤器
     ..... //还有很多选项
});

更多选项请看官网：

 

只要有选项两个字的，在我们大Vue实例中，都是可以定义的。

posted @ 2020-02-21 11:26  帅丶高高  阅读(522)  评论(0)    收藏  举报