Vue.js入门学习

时间 2019-11-08

标签 vue.js vue 入门学习栏目 JavaScript 繁體版

原文原文链接

Vue简述

是一个MVVM模式的JavaScript库，他的核心思想是数据驱动和组件化，是双向数据绑定的一个实现库。在vue中实现MVVM模式：vue

vue的viewmodel是实现双向数据绑定的关键，它包含了DOM listeners 和Data Bindings这两个工具；
从view到viewmodel，DOM listeners工具帮助咱们检测页面上DOM元素的变化，实现更新；
从model到viewmodel，Data Bindings帮助咱们监听model的变化，实现实时更新。

环境搭建

node安装（https://nodejs.org/en/download/）——安装npm

cnpm安装（淘宝对npm的镜像服务器）node

npm install -g cnpm --registry=https://registry.npm.taobao.org

vue-cli安装
是Vue官方提供的一个命令行工具，用于快速搭建大型的单页面应用。webpack
```
cnpm install -g vue-cli
```
最后输入vue检查是否安装成功
建立一个Vue项目
在指定文件夹输入web
```
vue init webpack vue-demo
```
运行一个vue项目vue-cli
```
npm run dev
```

实现helloworld输出

<body>
    <!--建立view-->
    <div id="app">
        {{ message }}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 建立的Model
    var exampleData = {
        message: 'Hello World!'
    }

    // 建立一个 Vue 实例或 "ViewModel"
    // 它链接 View 与 Model
    new Vue({
        el: '#app',
        data: exampleData
    })
</script>

上面的这种方式，是经过直接引入vue.js库来实现，若想经过vue-cli实现的话，原理也是同样的，只是将建立view、viewmodel、vue实例的过程模块化和组件化了。npm

Vue经常使用指令

vue的指令是以v-开头的，他们敢于HTML元素，提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为服务器

v-if：条件渲染指令，根据表达式的真假来删除和插入元素。
v-bind指令能够在其名称后面带一个参数，中间放一个冒号隔开，这个参数一般是HTML元素的特性（attribute），例如：v-bind:class
v-for:遍历
v-on指令用于给监听DOM事件，它的用语法和v-bind是相似的，例如监听元素的点击事件：app
```
a v-on:click="doSomething"
```

还有等等以v-开头的指令（略）模块化

1. vue.js学习之入门实例
2. vue.js 入门学习笔记一
3. Vue.js学习笔记入门语法篇
4. Vue.js简单基础入门学习
5. vue.js框架入门学习I
6. vue.js学习入门-mvc，mvp，mvvm结构
7. Vue.js入门
8. Vue.js的入门
9. vue.js 入门
10. vue.js入门
更多相关文章...
• Memcached入门教程 - NoSQL教程
• 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
• YAML 入门教程
• Tomcat学习笔记（史上最全tomcat学习笔记）