Vue.js再入门

作者: _ihhu | 来源:发表于2017-03-07 16:34 被阅读536次

    Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。因此,我们既可以拿Vue当作普通的js模板引擎使用,也可以拿它开发的大型复杂单页应用。

    Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器

    Vue.js实例

    Vue 实例,实则也就是 ViewModel(数据 + 函数),都是通过构造函数 Vue 创建

    var vm = new Vue({
        name:'root',
        el:"#app",
        // 数据
        data: { a: 1 } / Function, // data类型根实例为Object,组件中为Function
        props:[]/{}, // 设置父组件传递给子组件的数据限制
        computed:{}, // 计算属性
        watch:{}, // 监控属性
        methods:{}, // 事件操作
        // 资源
        directives:{}, // 内部指令
        filters:{}, // 内部过滤器
        components:{}, // 内部组件
        // 生命周期:实例创建 => 编译挂载 => 组件更新 => 销毁
        beforeCreate(){
            console.log('beforeCreate ==> 实例创建')
        },
        created(){
            // 可以操作data, 但未生成DOM(未挂载)发起异步请求,初始化组件状态数据 data
            console.log('created ==> 实例创建完成,属性已绑定')
        },
        beforeMount(){
            console.log('beforeMount ==> 模板编译/挂载之前')
        },
        mounted(){
            // 已生成DOM到document中,可访问this.$el属性
            console.log('mounted ==> 模板编译/挂载之后')
        },
        beforeUpdate(){
            console.log('beforeUpdate ==> 组件更新之前')
        },
        updated(){
            // 操作DOM $('#box1')
            console.log('updated ==> 组件更新之后')
        },
        activated(){
            // 操作DOM $('#box1')
            console.log('activated ==> 组件被激活时(for keep-alive组件)')
        },
        deactivated(){
            console.log('deactivated ==> 组件被移除时(for keep-alive组件)')
        },
        beforeDestroy(){
            // 解除事件绑定,销毁非Vue组件实例等 如:this.$off('event1') select2.destory()
            console.log('beforeDestroy ==> 组件销毁之前')
        },
        destroyed(){
            console.log('destroyed ==> 组件销毁之后')
        }
    })
    

    模版语法

    文本插值(v-text,v-html)

    • 使用 {{ }} / <span v-text="msg"></span> 绑定数据
    • {{ }} 纯文本绑定,单向,随vm变化而变化
    • <span v-once>{{ msg }}</span> 纯文本,单次,不跟随vm变化
    • <span v-html="msg"></span> 不转义html标签,绑定html

    属性绑定(v-bind)

    - 使用 `v-bind` 指令绑定数据至标签属性
    <!-- 绑定一个属性 -->
    ![](imageSrc)
    <!-- 缩写 -->
    ![](imageSrc)
    <!-- with inline string concatenation -->
    ![]('/path/to/images/' + fileName)
    <!-- class 绑定 -->
    <div :class="{ red: isRed }"></div>
    <div :class="[classA, classB]"></div>
    <div :class="[classA, { classB: isB, classC: isC }]">
    <!-- style 绑定 -->
    <div :style="{ fontSize: size + 'px' }"></div>
    <div :style="[styleObjectA, styleObjectB]"></div>
    <!-- 绑定一个有属性的对象 -->
    <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
    <!-- 通过 prop 修饰符绑定 DOM 属性 -->
    <div v-bind:text-content.prop="text"></div>
    <!-- prop 绑定. “prop” 必须在 my-component 中声明。 -->
    <my-component :prop="someThing"></my-component>
    <!-- XLink -->
    <svg><a :xlink:special="foo"></a></svg>
    

    事件绑定(v-on)

    - 使用 `v-on` 指令绑定事件
    <!-- 方法处理器 -->
    <button v-on:click="doThis"></button>
    <!-- 内联语句 -->
    <button v-on:click="doThat('hello', $event)"></button>
    <!-- 缩写 -->
    <button @click="doThis"></button>
    <!-- 停止冒泡 -->
    <button @click.stop="doThis"></button>
    <!-- 阻止默认行为 -->
    <button @click.prevent="doThis"></button>
    <!-- 阻止默认行为,没有表达式 -->
    <form @submit.prevent></form>
    <!-- 串联修饰符 -->
    <button @click.stop.prevent="doThis"></button>
    <!-- 键修饰符,键别名 -->
    <input @keyup.enter="onEnter">
    <!-- 键修饰符,键代码 -->
    <input @keyup.13="onEnter">
    <!-- the click event will be triggered at most once -->
    <button v-on:click.once="doThis"></button>
    

    表单绑定(v-model)

    // 文本框
    <input v-model="message" placeholder="edit me">
    // 文本域(支持换行)
    <textarea v-model="message" placeholder="add multiple lines"></textarea>
    // 复选框
    // 单选(返回 true/false )
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>
    // 多选 (返回一个数组 ['jack', 'john'])
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
    //单选框 (返回选中的值)
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    // 下拉框
    // 单选 (返回选中的值)
    <select v-model="selected">
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    // 多选(返回一个数组 ['A','B'])
    <select v-model="selected" multiple>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    

    列表渲染(v-for)

    data: {
     items: [
        {message: 'Foo' },
        {message: 'Bar' }
      ]
      object: {
         firstName: 'John',
         lastName: 'Doe',
         age: 30
       }
    }
    //基本用法
    <ul id="example-1">
        <li v-for="item in items">
            {{item.message}}
        </li>
    </ul>
    //为数组索引指定别名(或者用于对象的键)
    <div v-for="(item, index) in items">
      {{index}} - {{item.message}}
    </div>
    <div v-for="(val, key) in object">
      {{ key }} : {{ val}}
    </div>
    <div v-for="(val, key, index) in object">
      {{key}} : {{val}} : {{index}}
    </div>
    

    条件判断(v-show,v-if,v-else,v-else-if)

    **v-if**
    //切换单个元素
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>
    
    //切换多个元素
    <template v-if="ok">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </template>
    
    //多条件判断
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
    
    **v-show**
    <h1 v-show="ok">Hello!</h1>
    //不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display 。
    //注意 v-show 不支持 <template> 语法。
    
    
    

    指令

    • 带有 v- 前缀的特殊属性
    • 当其表达式的值改变时相应地将某些行为应用到 DOM 上
    • v-bind/v-for/v-html/v-on/v-if/...
    • v-bind 缩写 <a v-bind:href="url"></a><a :href="url"></a>
    • v-on 缩写 <a v-on:click="doSomething"></a><a @click="doSomething"></a>

    注册指令

    //全局注册
    // 注册一个全局自定义指令 v-focus
    Vue.directive('focus', {
        // 当绑定元素插入到 DOM 中。
        inserted: function (el) {
            // 聚焦元素
            el.focus()
        }
    })
    //局部注册
    directives: {
        focus: {
            // 指令的定义---
        }
    }
    //使用
    <input v-focus />
    

    过滤器

    • 使用 | 对原始值进行处理
    • 用于属性绑定与 {{ }}
    • {{ msg | capitalize }} <a :id="msgId | formatId"></a>
    • 可以串联 {{ msg | filterA | filterB }}
    • 可以接收参数 {{ msg | filterA(arg1, arg2) }}

    注册过滤器

    //全局注册
    Vue.filters('capitalize',value=>{
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    })
    //局部注册
    filters: {
        capitalize: function (value, arg1) {
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
        }
    }
    //使用
    <span>{{msg | capitalize(arg1) }}
    

    相关文章

      网友评论

        本文标题:Vue.js再入门

        本文链接:https://www.haomeiwen.com/subject/wlgsbttx.html