java-microservice-01-vue-02-introduction

最新推荐文章于 2024-05-23 12:00:00 发布

zhoux_top

最新推荐文章于 2024-05-23 12:00:00 发布

阅读量673

点赞数

分类专栏： java 文章标签： vue.js java javascript

本文链接：https://blog.csdn.net/HenryChow_2015/article/details/122238318

版权

java 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

java-microservice-01-vue-02-introduction

Vue常见用法

先来看个完整例子：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>advance</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<!--绑定属性-->
<div id="d1" v-bind:title="title1">
    <!--普通文本渲染-->
    message：{{message}}<br/>
    <!--条件判断-->
    <span v-if="showAge">年龄：1</span><br/>
    <!--for循环-->
    name:<span v-for="name in names"><span>{{name}} </span></span><br/>
    <!--v-on事件监听-->
    <button v-on:click="cli">点击改变时间</button>
    <br/>
    <!--双向绑定-->
    <span>{{ inp }}</span><br/>
    <input type="text" v-model="inp"/>
    <!--组件化：注意自定义名和参数避免使用大写特殊符-->
    <comp v-for="name in names" v-bind:param="name"/>
</div>
<script>
    <!--定义组件-->
    Vue.component("comp",{
        <!--入参-->
        props:["param"],
        <!--模板-->
        template:"<li>{{param}}</li>"
    })
    var vm = new Vue({
        <!--组件-->
    	el: "#d1",
        <!--数据-->
    	data: {
    		message: "普通文本",
    		title1: "提示",
    		showAge:true,
    		names:["张三","李四"],
    		inp:""
    	},
        <!--方法-->
    	methods:{
    	    cli:function(){
    	        this.message = Date();
    	    }
    	}
    })
</script>
</body>
</html>

绑定属性：
v-bind:[attribute]=[value]
普通文本渲染：
{{[value]}}
条件判断：
v-if=[bool/condition]
for循环：
v-for=[item] in [items]
事件监听：
v-on:[event]=[methodName]
双向绑定：
v-model=[value]
自定义组件：
参考上述 comp组件

zhoux_top

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java-microservice-01-vue-02-introduction

java-microservice-01-vue-02-introductionVue常见用法先来看个完整例子：<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>adv
复制链接

扫一扫