VUE准备工作-蒲公英云

VUE准备工作

1.了解vue简单历程，组成部分

Vue是一个构建数据驱动的web界面的渐进式框架，采用自底向上增量开发的设计。VUe.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件

Vue只关注视图层
Vue通过新的属性（自定义）和（表达式）扩展了HTML
Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件
 Vue学习起来非常简单

①范例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport"  content="width=device-with,initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title></title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p>{
   {message}}</p>
            <input type="text" v-model="message"/>
        </div>
        <script>
            new Vue({
                el:"#app",
                data:{
                    message:"hello vue"
                }
            })
        </script>
    </body>
</html>

②效果

③了解部分

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTkyMTgyMQ_size_16_color_FFFFFF_t_70

2.Vue特性

轻量
Vue.js库的体积非常小的，并且不依赖其他基础库
数据绑定
对于一些富交互、装填机类似的前端UI界面，数据绑定非常简单，方便。
指令
内置指令统一为（v-*）,也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM.
插件化
Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件
组件化
组件可以扩展HTML元素，封装可重用的代码，允许我们使用小型、自包含和通用可复用的组件构建大型应用

3.简单实用vue,切入实践的一些准备工作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            作者：1436178326@qq.com
            时间：2020-09-16
            描述：vue初学长成记
            1.下载到本地【推荐*****】
                本地引用<script src="js/vue.js"></script>
            2.cdn【不推荐使用】
            <script scr="https://cdn.bootcss.com/vue/2.3.3/vue.js"></script>
            3.npm
               本地引用：<script src="node_modules/vue/dist/vue.js"></script>
        -->
    </body>
</html>