Vue成长之记

最新推荐文章于 2024-07-26 08:00:00 发布

置顶全栈代码

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量95

点赞数 1

分类专栏： Vue 文章标签： vue css vue.js

本文链接：https://blog.csdn.net/weixin_43403191/article/details/107162872

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

VUE自学
开发java，现阶段主要记录vue自学知识。
安装下载教程：https://cn.vuejs.org/v2/guide/installation.html
后续慢慢更新新的知识

在这里插入代码片
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="vue.js"></script>
		
	</head>
	<body>
		<div id="app">
		<ul>
			<li v-for="todo in todos">
				{{todo.text}}
			</li>
		</ul>
		<!--文本插值-->
		<p>{{mess}}</p>
		<!--button按钮事件-->
		<button @click="reser">点击</button>
		<!--v-for教程-->
		<p v-for="(k,y,z) in test">值是{{k}},建是{{y}},索引{{z}}</p>
		<!--v-if教程-->
		<p v-if="green">Yes</p>
		<!--v-bind教程-->
		<p v-bind:style="syu">v-bing行内</p>
		<a>账号</a><input type="text" placeholder="请输入账号" v-model="username"/>
		<a>密码</a><input type="password" placeholder="请输入密码" v-model="pass"/>
		<input type="button" @click="btn()" value="开始"/>
		<!--组件教程-->
		<my-component></my-component>
		<!--路由教程-->
	<!-- 	<p><router-link to="/ts">测试连接</router-link></p>
		<router-view></router-view> -->
		
		</div>
		
			
		
		<script type="text/javascript">

		
			
			Vue.component('my-component',{
				template:'<div>A Custom component!</div>'
				})
				
			var vm = new Vue({
				el:'#app',
				data:{
					todos:[
						{text:'hello'},
						{text:'word'},
						{text:'pool'}
					],
					mess:'hello',
					test:{
						id:'1',
						name:'tesr',
						po:'sas'
					},
					green: true,
					syu:{
						color:"red",
						fontSize:"50px",
					}
				},
				methods:{
					reser:function(){
						this.mess = this.mess.split('').reverse().join('')
					}
				}
			})
		</script>
	</body>
</html>

常用指令：
      v-text:用于显示文本
      v-html:用于显示HTML  节点里面的内容
      v-model:可以绑定  视图上面的数据模型
              (数据模型需要在data中   初始化)
      v-for: 用于 遍历数组   v-for="value in array"  ->写在
              希望重复的元素上面
      v-if
      v-else
      v-else-if

      v-show: 根据条件来显示
      v-bind:用于绑定属性   简写  :class    :src     :href  ...
      v-on:用于绑定事件，简写   @事件名

全栈代码

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue成长之记

VUE自学开发java，现阶段主要记录vue自学知识。安装下载教程：https://cn.vuejs.org/v2/guide/installation.html后续慢慢更新新的知识在这里插入代码片<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="v
复制链接

扫一扫