欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue.js库的第一天的学习

程序员文章站 2022-04-11 08:52:18
一,vue.js简介 Vue.js可以作为一个js库来使用,也可以用它全套的工具来构建系统界面,这些可以根据项目的需要灵活选择 所以说, vue.js是一套构建用户界面的渐进式框架 Vue.js的核心库只关注视图层,Vue的目标通过尽可能简单的API实现相应的数据绑定, 在这一点上Vue.js类似于 ......

一,vue.js简介
  vue.js可以作为一个js库来使用,也可以用它全套的工具来构建系统界面,这些可以根据项目的需要灵活选择
  所以说, vue.js是一套构建用户界面的渐进式框架

  vue.js的核心库只关注视图层,vue的目标通过尽可能简单的api实现相应的数据绑定,
  在这一点上vue.js类似于后台的模板语言

  vue.js也可以将界面拆分成一个个的组件,通过组件来构件界面,
  然后用自动化工具来生成单页面系统

 

二,vue实例

  

    <!-- 每一个vue应用都是通过实例化一个新的vue对象开始的 -->
    <div id="app">{{ msg }}</div>
    <script>
        var vm = new vue({
            el:'#app',
            data:{
                msg:'hello world!'
            }
        })
    </script>

 

  其中,el属性对应一个标签,当vue对象创建后,这个标签的区域就被vue对象接管,
  在这个区域就可以使用vue对象中定义的属性和方法

 

三,vue.js模板语法

  

  模板语法指的是如何将输入放入html中, vue.js使用了基于html的模板语法,
  允许开发者声明式的将dom绑定至底层vue实例的数据。

    <div id="app">
        <!-- 插入式, 使用'mustache'语法的文本插值 -->
        <p>{{ str }}</p>
        <p>{{ str.split('').reverse().join('')}}</p>
        <p>{{ inum+15 }}</p>
        <p>{{ bisok?'yes':'no' }}</p>
        <a v-bind:href=surl>百度的链接</a><br><br>
        <!-- 指令, 监听click事件来执行fnreversal方法 -->
        <input type="button" value="反转" v-on:click='fnreversal'>
    </div>
    <script>
        var vm = new vue({
            el:'#app',
            data:{
                str:'hello world!',
                inum:10,
                bisok: true,
                surl:'http://www.baidu.com'
            },
            methods:{
                fnreversal:function(){
                    this.str = this.str.split("").reverse().join('');
                }
            }
        })
    </script> 

四,class 与 style绑定

  使用v-bind指定来设置元素的class属性或者style属性,它们的属性值可以是表达式,
  vue.js在这个一块做了增强,表达式结果除了是字符串之外,还可以是对象或数组

 <div id="app" v-bind:class="{big:isactive, red:haserror}">
        绑定方式一,对象语法
    </div> 
    <script>
        // 第一种方式对象语法
        var vm = new vue({
            el:'#app',
            data:{
                isactive: true,
                haserror: false
            }
        })
    </script>

 

五,条件渲染

  通过条件指令可以控制元素的创建(显示)或者销毁(隐藏)

  

 <!-- v-if 可以控制元素的创建或者被销毁 -->
    <!-- v-if 是真正的把元素删除了 -->
    <div id="box">
        <h1 v-if='isv'>这是使用 v-if 的h1</h1>
        <h2 v-else>这是使用 v-else 的h2</h2>  <!-- v-else 必须紧跟在 v-if或者v-else-if 后面 -->

        <h3 v-show='isv'>这是使用 v-show 的h3</h3>  <!-- v-show把元素的 display 状态改为none,只是隐藏了-->
        <div v-if='scode=="a"'>a</div>
        <div v-else-if='scode=="b"'>b</div>
        <div v-else-if='scode=="c"'>c</div>
        <div v-else>not a/b/c</div>
    </div>
    <script>
        var vm = new vue({
            el:'#box',
            data:{
                isv: false,
                scode:'d'
            }
        })
    </script>