Vue学习笔记---基础篇

最新推荐文章于 2024-07-12 19:47:55 发布

Ap3x

最新推荐文章于 2024-07-12 19:47:55 发布

阅读量194

点赞数

文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_44116510/article/details/103705356

版权

如果元素内容可能变化: {{}}
如果元素属性可能变化: :
如果一个元素显示隐藏: v-show
如果两个元素二选一显示: v-if v-else
如果多个元素多选一显示: v-if v-else-if v-else
绑定事件: @ (v-on)
反复生成多个相同结构的元素: v-for
如果绑定的内容是HTML片段时: v-html
避免用户短暂看到{{}}: v-cloak v-text
只在首次渲染时，绑定一次: v-once
保护内容中的{{}}不被编译: v-pre

文本

{{}}中等效于模板字符串中的${}变量，算数计算，其它有返回值的表达式，三目，有返回值的函数调用，访问数组元素，访问对象属性。

<body>
    <div id="app">
        <h1>{{value}}</h1>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            value: "今天是圣诞节"
        }
    })
</script>

    <div id="app">
        <h1>{{value?"我是真的":"我不是真的"}}</h1>
        <!-- 这里当然能无限套娃三目运算，
        来实现一个非常长的if-else嵌套
        但是我觉得这不优雅且傻逼 -->
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            value: true
        }
    })
</script>

v-bind 绑定attribute

v-bind:属性名=“变量或表达式”
但是v-bind可以省略
可以写成 :属性名=“变量或表达式”

<body>
    <div id="app">
        <h1 :class=`red`>这段字是红色</h1>
        <h1 :class="color">这段字也是红色</h1>
    </div>
    <style>
        .red {
            color: red;
        }
    </style>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            color: "red"
        }
    })
</script>

v-show

通过变量或条件表达式来控制元素是否display：none

<body>
    <div id="app">
        <h1 v-show="bool">title_1</h1>
           <!-- title_1不显示 -->
        <h1 v-show="!bool">title_2</h1>
           <!-- title_2显示 -->
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            bool: 0
        }
    })
</script>

v-if

两个元素二选一显示

注意：v-else后面不要添加 = 与任何内容
注意：两个元素必须紧邻，两个元素之间不允许插入其他内容

<body>
    <div id="app">
        <h1 v-if="bool">title_1</h1>
        <h1 v-else>title_2</h1>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            bool: 0
        }
    })
</script>

多个元素选一个显示

<body>
    <div id="app">
        <h1 v-if="bool_1">title_1</h1>
        <h1 v-else-if="bool_2">title_2</h1>
        <h1 v-else>title_3</h1>
        <!-- 只会显示title_3 -->
        
    </div>
</body>
<script>
    var noob = new Vue({
        el: '#app',
        data: {
            bool_1: false,
            bool_2: false
        },
    }, )
</script>

methods

个人感觉就像function
如果不用简写，语法是函数名: function(参数) {}
使用简写后的语法是函数名(参数){}
非常的简洁明了，不是吗？
值得注意的是，不要在这里写箭头函数

<body>
    <div id="app">
        <span>我是数字{{num}}</span><button @click="add(1)">点我加一</button>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 1,
        },
        methods: {
            add(temp) {
                this.num += temp
            }
        },
    })
</script>

在函数名(参数){} 中
可以被传递的除了参数，还有触发的dom事件；
例如

<body>
    <div id="app">
        <span>我是数字{{num}}</span>
        <button @click="doit($event,1)"> 点我加一</button>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 1,
        },
        methods: {
            doit(event, temp) {
                console.log(event.type)
                this.num += temp
            }
        },
    })
</script>

v-for

v-for可以根据数组来反复生成对象
语法为 v-for="(elem, index) of 数组"
例如：

<body>
    <div id="app">
        <h1>今天我了好多事情</h1>
        <ul>
            <li v-for="(elem, index) of arr">{{index+1}}、{{elem}}</li>
        </ul>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            arr: ["吃饭", "睡觉", "打豆豆"]
        },
    }, )
</script>

v-html

使用{{}}文本有一个问题，那就是不会进行浏览器不会转码，只会原样显示
就像DOM中的textContent
想要在innerHTML里显示标签和元素只能使用v-html指令，值得注意的是使用的
v-html指令只会原先的innerHTML会被覆盖！！！

<body>
    <div id="app">
        <p>{{str}}</p>
         <!-- 只会显示原样显示不会转码 -->
        <p v-html="str"></p>
        <!-- 可以正常的显示这个标签 -->
    </div>
</body>
<script>
    var noob = new Vue({
        el: '#app',
        data: {
            str: `<a href="www.baidu.com">点我打开百度</a>`
        },
    }, )
</script>

防止用户短暂看到{{}}语法和VUE语句

为了防止用户在打开网页时会看见一闪而过的VUE语句，可以使用以下两种方法来实现正常显示：
方法1. v-cloak
i. 在带有{{}}的元素上写v-cloak属性，不要写属性值！
<元素 v-cloak>{{…}}</元素>
问题: v-cloak本身没有任何隐藏效果，单加v-cloak毫无作用
ii. 需要自定义css样式，用属性选择器找到所有带有v-cloak属性的元素，将他们隐藏:

	<style>
	[v-cloak]{ display:none }
	</style>

这样就不会出现一闪而过的VUE语句

方法2. v-text

这个方法并不好用，但是好处是不用额外在定义一个style
i. <元素 v-text=“变量”></元素>
ii. 原理: v-text会用变量的值填充元素的内容
iii. 强调: 如果元素的内容需要变量的值和其它文字拼接而成，则需要在v-text内用模板字符串拼接，元素内容中不应该包含任何其它内容！因为就算包含其它内容，也会被覆盖！

		<h1 v-text="`用户名:${uname}`"></h1>

v-once

只在首次渲染页面内容时加载一次，之后及时变量值发生变化，也不会自动更新:

<元素 v-once>{{变量}}</元素>

v-pre

保护内容中的{{}}不被编译:
如果内容中刚好包含{{}}，又不想被vue编译时，就用 v-pre
如果内容中刚好包含{{}}，则vue框架不会解析

<div v-pre>Vue框架采用{{变量}}语法，绑定元素内容</div>

双向绑定 v-model

双向绑定既能将内存中变量值的修改自动更新到页面上对应元素中。又能将页面上元素内容的变化，自动更新回程序中的变量中，特别是适用于表单之中！！
例如<input>、<textarea> 及 <select> 元素
可以通过 v-model:value=“变量” 来进行双向绑定
例如

<body>
    <div id="app">
        <input type="radio" name="sex" value="1" v-model:checked="sex">男
        <input type="radio" name="sex" value="0" v-model:checked="sex">女
        <br>
        <select v-model:value="shengfen">
            <option value="bj">北京</option>
            <option value="sd">山东</option>
            <option value="hn">河南</option>
        </select>
        <br>
        <input type="checkbox" v-model:checked="bool">同意
        <br>
        <button @click="fun()">点我显示输入信息</button>

    </div>
</body>
<script>
    var noob = new Vue({
        el: '#app',
        data: {
            sex: 1,
            shengfen: "bj",
            bool: false
        },
        methods: {
            fun() {
                alert(`性别：${this.sex}
                省份：${this.shengfen}
                是否同意条款：${this.bool}
                `)
            },
        },
    }, )
</script>

修改css

有两种vue中的方法来修改css

1.修改元素的class

2.通过对象或者字符串修改style

<h1 :style="myStyle" >随便写点什么</h1> 
<h1 :style="myStyle_2" >随便写点什么</h1> 
....
  data: {
            myStyle: {
                color: "red",
                padding: "5px"
            },
            myStyle_2: `color: blue;padding: 5px`,
        },

watch

自动监视data中一个模型变量的值的变化。只要模型变量的值发生改变，就自动执行监视函数！
只要变量值发生改变，希望立刻执行查询操作时，就用监视函数

<body>
    <div id="app">
        <input type="checkbox" v-model:checked="bool">同意
    </div>
</body>
<script>
    var noob = new Vue({
        el: '#app',
        data: {
            sex: 1,
            shengfen: "bj",
            bool: false
        },
        watch: {
            bool() {
                alert(`你${this.bool?"同意":"拒绝"}了条款`)
            }
        },
    }, )
</script>

computed

计算属性是不实际保存属性值，它的属性值，需要根据其他属性计算获得。
如果页面上想要的值，数据库或服务端没有直接提供，但是，可以根据现有的数据计算获得，就可用计算属性。
实际上感觉用法和methods很像，好处是不会重复计算一个值。

<body>
    <div id="app">
        我想要买<input type="text" v-model:value="number">个香香鸡
        <br> 一个香香鸡要花
        <input type="text" v-model:value="price">元
        <p>总共要花费{{sum}}元</p>
    </div>
</body>
<script>
    var noob = new Vue({
        el: '#app',
        data: {
            price: 13,
            number: 1
        },
        computed: {
            sum() {
                return this.price * this.number
            }
        },
    }, )
</script>

filter过滤器

<body>
    <div id="app">
        <p>{{str|toUP}}</p>
    </div>
</body>
<script>
    Vue.filter('toUP', function(value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    })
    var noob = new Vue({
        el: '#app',
        data: {
            str: "today is a good day",
        },

    }, )
</script>

Ap3x

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记---基础篇

如果元素内容可能变化: {{}}如果元素属性可能变化: :如果一个元素显示隐藏: v-show如果两个元素二选一显示: v-if v-else如果多个元素多选一显示: v-if v-else-if v-else绑定事件: @ (v-on)反复生成多个相同结构的元素: v-for如果绑定的内容是HTML片段时: v-html避免用户短暂看到{{}}: v-cloak ...
复制链接

扫一扫