Vue篇/第一 初识Vue

 第一步引入核心库 

<!-- 

    开发环境的库文件 会有一些警告和错误信息

    生产环境的库文件删除了警告和错误信息 提高运行速率

    -->

    <script src="../node_modules/vue/dist/vue.min.js"></script>

  

第二步创建一个容器 并为其指定一个id

<!-- 在挂载容器之外 所有的标签 遵循 html语法  所以会原样输出 -->

 <div id="app">

        <!-- 用双花括号去渲染内容（属性） {{}} 为插值表达式 -->

 <!-- {{}} 插值表达式  可以渲染属性 这里面不能写复杂的语句 比如 if switch 等等 但是可以写三元运算符（三目运算）

            {{条件 ？ ：}} -->

        {{msg}}

    </div>

第三步 引用vue的方法     实例化vue的方法

/*　   vue实例的挂载点 不能是 html 或者body标签

　　 所有要渲染的内容 必须 先定义后使用

        可以定义到 data中 或者 其他属性中 */

<script>

        new Vue({

            el:'#app',//元素    挂载点  挂载点可以是id  也可以用class 但是不建议用class（class名不具有唯一性）    mount挂载 只能有一个

            data:{//数据 属性 声明式方法  不需要 let var 

                msg:'今天学习vue很开心！！'

            }

        })

 </script>

//在一个页面可以两个 以及两个以上vue实例  在vue中 支持这种方法 但是 记住 我们vue是单页应用 （只有一个 html 那么就是说 这个项目 只有 一个挂载点  只有 一个 vue实例）

vue的实例方法

<div id="app">

      <h1>{{x}}</h1>

    </div>

    <script>

 

        //Vue is a constructor and should be called with the `new` keyword

 

       let vm = new Vue({

           el:'#app',

           data:{

               x:10

           }

       })

       // console.log(new Vue())

       console.log(vm,'vue的实例')

       console.log(vm.x)

       //响应式的数据变化 

       //数据影响视图 数据变化 视图会跟着变化

    </script>

 

新人上路