第一个 Vue 实例

<div id="app">
        {{ message }} <!--变量???-->
        {{ msg }}
        <h4  @click="doIts">{{ food }}</h4>
    </div>

    <script>
        const app = new Vue({
            el: "#app",     // 绑定挂载点, 其内部的变量(可以同名)都将可以在 data 里面调用
            data: {
                message: "hello cs"
                msg: '<br>'   // 会对内容转义为字符串
            },
            methods: {
                doIts:function() {
                    this.msg += "!!!!--"   // 更改数据的值
                }
            }
        })
    </script>
  • le 是用来设置 Vue 实例挂载的元素(选择器)

    Vue 会管理 el 选择元素及其内部的后代元素

  • data 数据对象, 支持复杂类型的数据。 语法(user.name)

  • 在定义的参数里面也是可以调用内容体定义的函数

Vue 使用特殊的语法(指令)来进行 DOM 操作

Vue 指令(标签属性)(在他的内容里面可以直接放变量,或者是表达式 =“”

  • 内容绑定,事件绑定

    v-text v-html v-on

  • 显示切换,属性绑定

    v-show v-if v-bind

  • 列表循环,元素绑定

    v-for v-on v-model

  • 一些延伸,

    v-once v-pre v-clock

内容绑定,事件绑定

  • v-text="" 设置标签属性的文本值。会替换标签内原有的 文本值
  • v-html="" 如果单纯的文本值和 v-text 相同,如果内容有 html 属性则会解析为相应属性(标签)
  • v-on:事件="方法" or @事件:"" 为元素绑定事件, 事件(函数)在 Vue 中的 methods 中定义。需要传入当前 dom 对象可使用关键字 $event. @click="fn($event)"

在其内部定义的事件函数中 this 为当前 app 对象的别名?。可以通过其 点属性引用当前 app 定义的其他对象

v-on 修饰符

  • .stop 阻止事件冒泡?
  • .prevent 阻止元素默认事件
  • .{keyCode | keyAlias} 只当事件是从特定键触发时才触发回调:@keyup.enter="fn"
  • .native 监听组件根元素的原生事件
  • .once 只触发一次

修饰符可串联: @click.stop.prevent.once="btnClick"

<!-- 代码片段 -->
<div id="app">
    <form action="baidu">
        <div @click="divClick">
            <!-- 加上 stop后点击 btn 不会触发上层的点击事件 divClick -->
            <button @click.stop="btnClick">btn</button>
        </div>
        <!-- 阻止表单的默认提交事件 -->
        <input type="submit" @click.prevent="submitClick" />
    </form>
</div>

<script>
const app = new Vue({
    // ...    
})
</script>

显示切换属性绑定

  • v-show="" 根据后面 表达式的真假,显示或隐藏元素。(设置样式隐藏,可以在检查中被修改)

  • v-if="" v-else-if="" v-else="" 根据表达式的真假,切换元素的显示或者隐藏(操控 DOM 元素), 和 s-show 类似只不过这个 (直接隐藏(删除增加?)代码)。 操纵 dom 树对性能的损耗比较大,

  • v-bind:属性名="表达式" or :属性="" 设置元素的属性值

<h2 v-bind:class="{属性名: 布尔值, ...}></h2> 直接根据后面表达式的结果,设置 css 属性名 :style="{属性名: 属性的值}" ---> <h2 :style="{fontSize: '50px', ...}"></h2> 后面的值作为前面 css 属性(采取驼峰命名)的值。 直接传入一个数组 :style="[{color: 'red'}, {fontSize: '2em'}]"

<img :src="imgSrc" alt="" width="128px" :title="imgTitle + '!!!'"
        :class="isActive ? 'active' : ''" @click="toggleActive">
        <!--三元表达式 前面值为真,则显示样式 -->
        <img :src="imgSrc" alt="" width="128px" :title="imgTitle + '!!!'"
        :class="{ active : isActive, activeType: true }" @click="toggleActive">
        <!--另一种表达式 传入一个对象,对象里面:前面的值是否生效(css 类名是否显示),取决后面的表达式-->
<script>
    var appBind=new Vue({
        el: "#appBind",
        data: {
            imgSrc: "./img/18041.jpg",
            imgTitle: "chuan test",
            isActive: false
        },
        methods: {
            toggleActive: function() {
                this.isActive = !this.isActive
            }
        }

    })
</script>

列表循环,元素绑定

列表循环

  • v-for="i in list" 根据传入的可迭达对象进行循环, 当接受的参数有两个时,第二个参数为当前 下标. 列表的内容是响应式的会随着 数组的变大减少 显示内容. 会对其本身绑定的元素循环 <br v-for="i in []"> == <br>*5

在循环中加上 :key="循环节点的唯一标识" 可以更高效的更新虚礼 DOM.

    <div id="app">
        <ul>
            <button @click="add">添加数据</button>
            <button @click="remove">删除数据</button>
            <li v-for="(item, index) in arr">
                {{item}} ------- {{ index }}                
            </li><br>
            <li v-for="item in arr">
                {{item}}                
            </li><br>
            <li v-for="(item, index) in objArr">
                {{ item.name }} ------- {{index}}
            </li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {               
                arr: [1, 3, 5, 7, 'a'],
                objArr: [
                    {name: "obj1"}, {name: "obj2"}
                ]
            },
            methods: {
                add: function(){
                    this.objArr.push({name: "西兰花操蛋"})
                },
                remove: function(){
                    this.objArr.shift();
                }
            }
        })
    </script>

并不是所有的对元素更新都可以可以被 Vue 检测到,并作出响应。如:

  • ary.val[index] = 'a', 通过索引值修改数组中的元素, 针对此 Vue 提供:Vue.set(ary, index, val)

元素绑定

  • v-on 补充:在事件后面使用 . 可引用出的事件的(约束属性)。同时事件方法的函数可以传值的: @keyup.enter="sayHi(666)" (keydown 按下键盘触发, keyup 按下键盘抬起触发)

  • v-model 获取和设置元素的值(双向数据绑定:如表单里的值 message 绑定,用户追加 message 显示的内容)

<div id="app">
        <input type="text" v-model="message">
        <!-- <input type="text" :value="message" @input="valueChange"> -->
        <!-- <input type="text" :value="message" @input="message = $event.target.value"> -->
        <h2>{{ message }}</h2>

        <select v-model="fruit">
            <!-- 单选框的值绑定在父级, fruit== str 接受当前单选框的值 -->
            <option value="香蕉">香蕉</option>
            <option value="苹果">苹果</option>
        </select>
        <select v-model="fruit" multiple>
            <!-- 复选框的值绑定在父级, fruit== array 接受当前复选框的值[香蕉,苹果],都是可以设置默认值的 -->
            <option value="香蕉">香蕉</option>
            <option value="苹果">苹果</option>
        </select>
        <!-- 值绑定 -->
        <label v-for="item in []" :for="item">
            <input type="checkbox" id="item" :value="item" v-model="arr">
        </label>
</div>

<script>
    var app=new Vue({
        el:"#app",
        data: {
            message: "chuan test"
        },
        methods: {
            valueChange(event){
                // 手动实现 v-model, 在dom调用此方法时,如果省略参数,会自动传入 当前dom元素
                this.message = event.target.value
            }
        }
    })
</script>
v-model 修饰符
  • v-model.lazy="" 可以让数据在失去焦点或者回车时才会更新
  • number 让在输入框中输入的内容自动转成数字类型,注意绑定元素的初始值
  • trim 去除输入两边的空格

延伸

很少会使用到这几个指令

  • <h2 v-once>{{msg}}</h2> 表示元素和组件只会渲染一次,不会随着数据的变动而变动
  • <h2 v-pre>{{msg}}</h2> 跳过这个元素何其子元素的编译过程, Mustache 语法会被直接渲染到页面中({{msg}}
  • <h2 v-cloak>{{msg}}</h2> 此指令在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除。可以为此指令设置(属性) css 样式([v-cloak]{display:none;}) 实现页面加载后 vue 未渲染完全时的 页面 Mustache 代码的隐藏。

计算属性

计算属性实际上是作为 属性来使用的,函数的返回值作为属性的值。属性不需要当作函数执行{{fullName}}, {{fullName()}}

计算属性相较于 methods 里面定义的方法,在每次调用属性时(数据为变化)不会重复执行里面的函数

<!-- 代码片段 -->
<div id="app">
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
</div>

<script>
const app = new Vue({
    // ...
    data: {
        firstName: 'Lebron',
        lastName: 'James',
    }
    computed: {
        fullName: function(){   
            // 执行一次后只会在 数据发生变化后再次执行
            console.log('fullName 被执行')         
            return this.firstName + ' ' + this.lastName
        },
        // 为下面的简写,但是因为计算属性一般没有 set方法,只读属性
        // fullName = {
        //     set: function(newValue){},
        //     get: function(){
        //         return this.firstName + ' ' + this.lastName
        //     }
        // }
    }
})
</script>

网络请求

axios 网络请求库 + vue axios getor Vue2.0 之后,尤雨溪推荐大家用 axios 替换 JQuery ajax ,想必让 Axios 进入了很多人的目光中。Axios 本质上也是对原生 XHR 的封装,只不过它是 Promise 的实现版本,符合最新的 ES 规范.

<script>
    var app = new Vue({
        el: "#app",        
        data: {
            joke: "很哈皮"
        },
        methods: {
            getJoke: function(){
                var that = this
                axios.get("https://autumnfish.cn/api/Joke").then(function(response){
                    console.log(response.data)
                    // this.joke = response.data joke 的作用域仅在 vue中,此处没有此对象
                    // ?? 意思是 this的作用域仅能穿透一个函数(vue),函数的嵌套中 this失效??
                    // 但是使用箭头函数则没有此问题
                    // 但是vue 的事件定义中使用箭头函数 则报错 md
                    that.joke = response.data
                }, function(err){ })
            }
        }
    })
</script>

生命周期的简单引入

Vue 生命周期

钩子函数

mounted(){
        var that = this        
        let rs = "/search/hot"        
        axios.get(url+rs).then(function(response){                        
            that.query = response.data.result.hots[0].first
            that.searchMusic() // 原点击事件,直接调用       
        }, function(err){})        
    }
// 此函数会在页面渲染成html 后自动执行,更methods 等同级。可以直接调用 app里面的内容,如果事件想让其执行需要调用()

js 属性 事件属性绑定 使用 v-bind 直接与绑定事件,事件发生时执行里面的函数

<audio ref="audio" @ended="m_ended" controls @play="play" @pause="pause" :autoplay="musicUrl" class="audio_m" :src=" musicUrl ? musicUrl : './css/战场原荡漾.mp3'">
                        <!-- play pause 是audio 标签原有属性 等于达到条件属性启动,然后靠监听此属性启动事件 -->                        
</audio>
<script>

    var app = new Vue({
        methods{
            m_ended(){
            this.music_now += 1
            if(this.music_now < this.musicList.length ){
                let next = this.musicList[this.music_now]
                // console.log(next)  播放完自动切换下一曲
                this.playMusic(next.id, this.music_now)

            },
        }
    })
</script>

现阶段战术完

vue 对象实例化时接收的对象里面支持的方法和属性:

const app = new Vue({
    el: "#app",     // 绑定挂载点,
    data: {},       // vue实例的数据对象
    methods: {},  
    computed: {},   // 计算属性
    filters: {}     // 过滤器,里面定义的函数可以接受管道符号前的参数,作为过滤器函数的值 {{[1,20] | showPrice}}

})

相关推荐:

来自系列:Vue 笔记

分类 前端下文章:

微信小程序开发 days1 关注点:文件结构,json配置文件, 模板语法

小程序开发学习笔记 days2。 关注点:view, text, rich-text, button, image, navigator, icon, swiper, radio, checkbox

小程序学习笔记 days3。 关注点:生命周期,自定义组件

小程序学习笔记 days4。 关注点:scroll-view, Promise

css3 选择器,背景定义(定位), 盒子定位,弹性布局,栅格系统。还有一些常用的 css 属性。

更多...

aid 加一试试->

评论([[comments.sum]])

发表

加载更多([[item.son.length - 2]])...

发表

2020-11 By Hchuan.

flask & bootstrap-flask

© 2021 HChuan. All rights reserved.

随机占位图来自:fghrsh

互联网ICP备案号:蜀ICP备2020031846号