Vue基础语法

最新推荐文章于 2023-11-28 15:33:55 发布

MikazukiMo

最新推荐文章于 2023-11-28 15:33:55 发布

阅读量111

点赞数

分类专栏：学习

本文链接：https://blog.csdn.net/MikazukiMo/article/details/105694940

版权

学习专栏收录该内容

28 篇文章 0 订阅

订阅专栏

Vue基础语法

<body>
    <div id="app">
        {{msg}}
    </div>
    <script type="text/javascript" src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "123"
            }
        });
    </script>
</body>

v-cloak

这个指令保持在元素上直到关联实例结束编译

css
[v-cloak] {
  display: none;
}

html
<div v-cloak>
  {{ message }}
</div>

保持隐藏,直到编译结束

v-text

更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值

<body>
	<div id="all">
        <span v-text="msg"></span>
        <!-- 和下面的一样 -->
        <span id="app">{{msg}}</span>

        <div v-html="msg1"></div>
    </div>
</body>

    <script>
        var vm = new Vue({
            el: "#all",
            data: {
                msg:"123",
                msg1: "<h1>HTML</h1>"
            }
        });
    </script>

v-html
更新元素的 innerHTML
注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代
存在安全隐患

<body>
	<div id="all">
        <span v-text="msg"></span>
        <!-- 和下面的一样 -->
        <span id="app">{{msg}}</span>

        <div v-html="msg1"></div>
    </div>
</body>

    <script>
        var vm = new Vue({
            el: "#all",
            data: {
                msg:"123",
                msg1: "<h1>HTML</h1>"
            }
        });
    </script>

v-pre
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<body>
	<div id="all">
        <span v-text="msg"></span>
        <!-- 和下面的一样 -->
        <span id="app">{{msg}}</span>

        <div v-html="msg1"></div>
        
		<span v-pre>{{ this will not be compiled }}</span>
    </div>
</body>

    <script>
        var vm = new Vue({
            el: "#all",
            data: {
                msg:"123",
                msg1: "<h1>HTML</h1>"
            }
        });
    </script>

双向数据绑定 v-model
在表单控件或者组件上创建双向绑定

只有以下使用：

<input>
<select>
<textarea>
components

修饰符：

.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤

<body>
	<div id="all">
	
        <div v-text="msg"></div>
		<input type="text" v-model ="msg">
		
    </div>
</body>

    <script>
        var vm = new Vue({
            el: "#all",
            data: {
                msg:"123",
            }
        });
    </script>

事件绑定 v-on

普通写法: <button v-on:click="doThis"></button>
简易写法: <button @click="doThis"></button>

<body>
    <div id="all">
        <div v-text="num"></div>

        <input type="button" v-on:click="num++">

        <input type="button" @click="num++">
    </div>
</body>

<script>
    var vm = new Vue({
        el: "#all",
        data: {
            num: 0,
            msg: "点一下"
        }
    });
</script>

属性绑定 v-bind

普通写法: <a v-bind:href="url">跳转网页</a>
简易写法: <a :href="url">跳转网页</a>
bind后可以修改标签的属性
v-model的底层原理就是通过v-bind和v-on
<input type="text" v-model ="msg">
<input type="text" v-bind:value ="msg" v-on:input="msg = $event.target.value">

样式绑定
1.对象绑定
v-bind:class="{{class1 | isclass1 , class2| isclass2}}"
是否使用样式
2.数组绑定
v-bind:class="[class1,class2]"

<style>
	.active{
		background-color:aque;
	}
	.test{
		border:1px;
	}
</style>

<body>
	<div id="all">
        <div v-bind:class="{{active|isActive,test|isTest}}"></div>
		<div :class="[activeClass,{{test|isTest}}]"></div>
		<div :class="arrClass"></div>
		<div :class="objClass"></div>
    </div>
</body>

    <script>
        var vm = new Vue({
            el: "#all",
            data: {
                isActive:"true",
                isTest:"true"
                activeClass:"active",
                testClass:"test",
                arrClass:["active","test"],
                objClass:{
					active:true,
					test:true
				}	
            }
        });
    </script>

3.内联样式
v-bind:style="{color:bule,border:1px}"

MikazukiMo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础语法

Vue基础<body> <div id="app"> {{msg}} </div> <script type="text/javascript" src="./vue.js"></script> <script> var vm = new Vue({ ...
复制链接

扫一扫