记录vue.js的入门基础

作者: 码枫云 | 来源:发表于2020-01-07 12:34 被阅读0次

Vue.js基础入门
Vue.js基础入门
渐进式框架 Vue.js 基础入门及简单编程演示
记录vue.js的入门基础
VUE基础知识入门
Vue基础知识总结
Vue.js开发常见问题解析
Vue.js 入门基础
vue.js基础入门
Vue.js状态管理工具Vuex快速上手

Vue是什么
Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

有过node.js开发经验学习Vue.js会更快的上手

Vue的特点
1-双向数据绑定
2-解耦视图和数据
3-前端路由技术
4-虚拟DOM
5-可复用的组件
6-状态管理

Vue的安装与使用
第一种:CDN引入

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

第二种:下载引入
开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js

第三种:NPM安装Vue-Cli3手脚架进行安装
npm install -g @vue/cli
vue create hello-world

创建Vue实例简单使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">       //创建一个标签 让Vue实例挂载在标签上(一般设置id为'APP')
        <h1>{{title}}</h1> // 通过胡子语法{{}}把data里面的数据插入标签里面
        <p>{{num+1}}</p>    //可以在胡子语法里面做简单的逻辑
        <p>{{txt===1 ? "文字1" : "文字2"}}</p>
    </div>
</body>
</html>
<script>
    let vm = new Vue({   //new一个Vue对象赋值给变量,里面传入一个对象,这个对象是用来给app里面的标签提供数据
        el:"#app",       //el是让Vue挂载到哪个元素上
        data:{
            title:'猪肉升价了' //data里面是一个对象,对象里面存放数据,
            num:0,
            txt:1
        }
    })
</script>