zoukankan      html  css  js  c++  java
  • 初识vue

    Vue是什么?

    Vue是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。Vue和angular类似,但是Vue的语法 用法更加精练,容易上手.vue中文网

    Vue 的数据绑定

    Vue的核心的功能就是双向的数据绑定.双向指的是:HTML标签数据 绑定到 Vue对象,反之也是绑定的.即HTML内容改变,vue对象的属性也会改变,反之相同.
    以前的jQuery等都是以dom变化后,触发js事件来获取标签的变化,在和后台交互,从而根据后台的返回数据改变HTML标签,过程很复杂.vue出世之后,开发人员只需要关心json数据的变化,vue会自动的映射到HTML上,而HTML的变化也会映射到js对象上,开发方式变成了前端由数据驱动的方式,抛弃了dom开发主导的方式.

    文字绑定 {{ }} -- 不支持html标签渲染

      <div id="app">
        {{msg}},{{count}}
      </div>
    
      var vm =   new Vue({
          el: '#app', // 指定选择器,作用是指定vue的作用范围
          // data属性指定我们能够在 #app 元素中使用的数据,
          // 这里的data的属性msg,count.... 最终会被赋值给new 出的Vue实例
          // 只要改变data属性值,页面中的值也会变化
          data: {
            msg: 'jun',
            count: 18
          }
        })
    

    如果想让{{}}内容是html标签,想让其以html标签的形式显示出来,在当前元素添加 属性 v-html="data内的属性名"

    属性绑定 v-bind:class="" :class=""

    通过v-bind给元素设置属性,v-bind:要添加的属性名="data里的属性名" 简写方式 :要添加的属性名="data里的属性名"
    v-bind 支持 data属性值传递数组或者对象. 数组传递多个属性,对象可以给值设置true/false 来设置.

    • style内联方式使用样式 :style="test" data:{test:{color:'#f0f',backgroundColor:'#ff0',border:'10px solid #f00'}}
    • v-if 更加data内的属性值 判断条件渲染 可以配合v-else
    • v-show 和v-if类似 但是不可以配合v-else
    • v-for="item in list" 列表渲染

    vue事件 v-on: @:

    • 内联的方式 写在标签内 v-on:click 简写 @click
      vue中所有用的方法,放在methods属性内
      @click.stop 加.stop后,就不会有冒泡了
      @click.prevent是阻止默认事件

    • v-model 配合可以编辑的元素使用

      <div id="app">
        <input type="text" v-model="status">
        <input type="checkbox" v-model="isChecked">
    
        <hr>
    
        男<input name="xx" type="radio" value="0" v-model="val">
        <hr>
        女
        <input name="xx" type="radio" value="1" v-model="val">
      </div>
      <script src="./node_modules/vue/dist/vue.js"></script>
      <script>
        var vm = new Vue({
          el: '#app',
          data:{
            status: 'v-model',
            isChecked: false,
            val: 0
          }
        })
      </script>
    
    • 过滤器
      Vue中的filters对象的属性就是过滤器
    {{time||coverttime}}
     filters: {
              // val的值就是过滤器|线前的值
              coverttime: function(val){
              // filter时无法通过this来得到data的属性
              console.log(val)
              // console.log(this)
              var dt = new Date(val)
              // 最终这里的返回值,就是页面使用这个过滤器位置要显示的值
              return dt.toLocaleDateString()
            }   
    

    组件

      <div id="app">
        <my-btn></my-btn>
      </div>
    
      // 定义(注册)一个组件
      // component// 组件
      // 第一个参数,给组件起个名字,我们最终会在html中以标签的形式来使用这个组合
      // 第二个参数,是个对象,要包含组件的内容,html,js数据。。
      Vue.component('my-btn',{
        // template属性指定组件的内容
        template: '<div id="是不是我"><button>漂亮的组件按钮</button></div>'
        //data中数据如果写死一个data:{} 那么这个组件在复用时操作的是同一数据,会导致每一个组件都是一样的.
        //data:function(){
              //函数每次调用时,内部变量被重新申明,是全新的变量,避免相同重复.  
        //}  
        methods:{方法}
        filters:{} 过滤器
    })
        var vm = new Vue({
          el: '#app'
        })
    
  • 相关阅读:
    h5唤起app
    app唤起的完美解决方案,及阻止浏览器的默认弹窗行为
    cdn
    函数声明和函数表达式的区别
    基础系列(7)—— 结构
    基础系列(4)—— C#装箱和拆箱
    重温软件工程——对软件工程的初步了解
    基础系列(9)—— 抽象方法和接口
    自学系列--git的基础简介
    设计模式之简单工厂模式
  • 原文地址:https://www.cnblogs.com/caijunjun/p/6658064.html
Copyright © 2011-2022 走看看