01Vue简介

标签：Vue DOM 简介 代码 js 实例 data 01Vue

Vue是什么

一套用于构建用户界面的渐进式JavaScript框架。
注：渐进式：Vue可以自底向上逐层应用。
简单应用：只需一个轻量小巧的核心库；
复杂应用：可引入各式各样的Vue插件。

开发者

尤雨溪

特点

• 采用组件化的模式，提高代码复用率，且让代码更好维护。
  .vue文件：HTML+CSS+JS
• 声明式编码，让编码人员无需直接操作DOM，提高开发效率。
  命令式编码：写一步动一下；
  声明式编码：

<ul id="list">
    <li v-for="p in persons">
        {{p.id}-{{p.name}-{p.age}}}
    </li>
</ul>

• 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
  【数据】--》【虚拟DOM】--》【页面真实DOM】
  

官网使用指南

英文官网：https://vuejs.org/
中文官网：https://cn.vuejs.org/

Vue代码初识

• 想让Vue工作，必须创建一个Vue实例，且还要传入一个配置对象；
• root容器里的代码依然符合HTML规范，只不过混入了一些特殊的Vue语法；
• root容器内的代码被称为【Vue模板】。
• Vue实例和容器一一对应；
• 真实开发中只有一个Vue实例，并且会配合一些组件使用；
• {{xxx}}中的数据xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
• 一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新（最终页面数据也会自动更新）。

<div id="root">
    <h1>Hello,{{name}}</h1>
</div>

<script type="text/javascript">
    Vue.config.productionTip=false //阻止vue启动时，生成生产提示
    
    //创建Vue实例
    new Vue( {
        el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为CSS选择器字符串
        data:{  //data 用于存储数据，数据供 el 所指定的容器去使用，值我们暂时先写成一个对象
            name:'尚硅谷'
        }
     } )
</script>

注意区分：js表达式 和 js代码

1、表达式：一个表达式会产生一个值，可以放在任一需要值的地方。
    (1) a
    (2) demo(1)
    (3) a+b
    (4) x === y ? 'a' : 'b'
2、js代码（语句）：
    (1) if(){}
    (2)for(){}

来源：尚硅谷

标签：Vue,DOM,简介,代码,js,实例,data,01Vue
From： https://www.cnblogs.com/quliangshyang/p/16823966.html