vue基础入门实战

最新推荐文章于 2024-08-28 16:49:19 发布

java小天才123

最新推荐文章于 2024-08-28 16:49:19 发布

阅读量135

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_41921563/article/details/111229032

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<body>
		<div id="app">
			{{message}}  
			<button v-on:click="fun1('v-on')">vue的onclick</button>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:'#app',
			data:{
				message:'hello vue'
			},

			methods:{
				fun1:function (msg) {
					alert("hello v-on");
					this.message=msg;
				}
			}
		})
	</script>

<body>
		<div id="app">

			<input type="text" v-on:keydown="fun($event)">
			<hr/>
			传统：
			<input type="text" onkeydown="showkeyCode()">
		</div>
	</body>
	<script>
		//view model


		new Vue({
			el:'#app',
			methods:{
				fun(event){
					var keycode=event.keyCode;
					if (keycode<48 ||keycode>57){
						event.preventDefault();
					}

				}
			}
		})
		function showkeyCode() {
			var keycode=event.keyCode;
			if (keycode<48 || keycode>57){
				event.preventDefault();
			}
		}
	</script>

<body>
		<div id="app">
			<div @mouseover="fun1" id="div">
				<textarea @mouseover="fun2($event)">这是一个文件域</textarea>
			</div>
		</div>
	</body>
	<script>
		//view model

		new Vue({
			el:'#app',
			methods:{
				fun1:function () {
					alert("经过div")

				},
				fun2:function (event) {
					alert("经过文本域");
					event.stopPropagation();

				}
			}
		})
		
	</script>

	<body>
		<div id="app">
			<font size="5" :color="xy1">ddjkd</font>
			<font size="10" :color="xy2">akdk</font>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el: "#app",
			data:{
				xy1:"green",
				xy2:"red"
			}
		})
	</script>

	<body>
		<div id="app">
			<table border="1">
				<tr>
					<td>序号号</td>
					<td>编号</td>
					<td>名称</td>
					<td>价格</td>
				</tr>
				<tr  v-for="(product,index) in products">
					<td>{{index+1}}</td>
					<td>{{product.id}}</td>
					<td>{{product.name}}</td>
					<td>{{product.price}}</td>
				</tr>
				
			</table>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:'#app',
			data:{
				products:[
						{id:1, name:"电脑", price:13},
						{id:2, name:"手机", price:14},
						{id:4, name:"平板", price:15},]
			}
		})
	</script>

<body>
		<div id="app">
			<form>
				用户<input type="text" name="name" v-model="user.username"><br/>
				密码<input type="text" name="password" v-model="user.password"><br/>
			</form>
		</div>
	</body>
	<script>
		//view model

		new Vue({
			el:'#app',
			data:{
				user:{
					username:"1234",
					password:"aaaa"
				}
			}
		})
	</script>

new Vue({
    el:'#app',
    data:{
        user:{
            id:"",
            username:"",
            password:"",
            email:"",
            age:"",
            sex:""
        },
        userList:[]
    },


    methods:{
      findall:function () {

          var _this=this;
          axios.get('/user/findAll.do')
              .then(function (response) {
                  // handle success
                _this.userList=response.data;
                  console.log(response);
              })
              .catch(function (error) {
                  // handle error
                  console.log(error);
              })

      },
        findById:function (userid) {

          var _this=this;
            axios.get('/user/findById.do', {params: {id:userid}})
                .then(function (response) {
                    _this.user=response.data;

                    $("#myModal").modal("show");
                })
                .catch(function (error) {
                    console.log(error);
                })


        },


        update:function (user) {
          var _this=this;
            axios.post('/user/updateUser.do', _this.user
            )
                .then(function (response) {
                    _this.findall();
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    },

    created:function () {
            this.findall();
    }
})