zoukankan      html  css  js  c++  java
  • vue基础

    1. 声明式渲染

                使用vue,首先引入vue.min.js:

                

              vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统:

                   

                  

                  浏览器显示:

                  

                  现在数据和DOM已经建立了关联,接下来直接修改app.message的值,内容就会相应的更新

                  例如:

                   

                   浏览器显示:

                   

                    除了以上可以插入内容之外,我们还可以绑定元素特性:

                 

                浏览器显示:

                

                上面的v-bind被称为指令,vue中的指令都带有前缀v-。

          2. 条件与循环   

                 控制切换一个元素是否显示:

                 

                浏览器显示:

                

              如果把seen的值改为false,该内容就会被隐藏

              v-for指令 :

               

              浏览器显示:

              

               3. 处理用户输入

              v-on指令可以添加一个事件监听器,通过它调用在vue实例中定义的方法:

              

               浏览器显示:

                

                  点击按钮之后,反转消息:

                 

               v-model(双向绑定指令)

                 

                浏览器显示:

                

                  input框内输入数据,上面的内容会相应的改变。

           4. 组件化应用构建

            在vue里,组件本质上是一个拥有与定义选项的一个vue实例,在vue中注册组件很简单:

            注册一个全局组件tablist,并使用它:

            

             浏览器显示:

             

              注册一个局部组件:

               

              浏览器显示:

              

             动态prop  :

             prop是父组件用来传递数据的一个自定义属性。

             父组件的数据需要通过props把数据传给子组件,子组件需要显式地用props选项声明“prop”:

              

              浏览器显示:

              

  • 相关阅读:
    HDU1251统计难题map+输入
    HDU1863畅通工程
    POJ2253 Frogger
    HDU 4725 (The Shortest Path in Nya Graph)层次网络
    hdu5521(Meeting)spfa 层次网络最短路
    Fire Net ZOJ 1002
    POJ3259(Wormholes) 判断负环
    POJ3268(Silver Cow Party)
    棋盘问题 POJ 1321
    POJ 1661 (Help Jimmy )
  • 原文地址:https://www.cnblogs.com/xwh816/p/10277126.html
Copyright © 2011-2022 走看看