vue学习第一部

vue基础使用 步骤
  • vue的框架思想(mvvm)
  • 显示数据

    •  vue 常用指令

    • 属性操作
    • 事件绑定
    • 操作样式
    • 条件渲染指令
    • 列表渲染指令

    vue对象提供的属性功能

    • 过滤器
    • 计算和侦听属性
    •  vue对象的生命周期
    • 阻止事件冒泡和刷新页面
    • 综合案例 - todolist

    百度　　　　v-bind 是vue1.x版本的写法

     显示WiFi密码

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <meta name="viewport" content="width=device-width, initial-scale=1">
head>
<body>

<div id="xx">

    <input :type="tt"> <button @click="showp">{{msg}}button>  

div>
body>

<script src="vue.js">script>
<script>
    new Vue({
        el:'#xx',  // #xx   css选择器
        data(){
            return {
                tt:'password',
                msg:'显示密码',
            }
        },
        methods:{
            // showp:function (){
            //
            // }
            showp(){ // 单体模式

                if (this.tt === 'password'){
                    this.tt = 'text';
                    this.msg = '隐藏密码';
                }else {
                    this.tt = 'password';
                    this.msg = '显示密码';
                }

            }
        }

    })


script>

html>

    事件绑定

     有俩种事件操作的写法,@ 事件名 和 v-on: 事件名

    <button v-on:click="num++">按钮button>   
<button @click="num+=5">按钮2button>
    1. 使用@事件名来进行事件的绑定
   语法：
      <h1 @click="num++">{{num}}h1>

2. 绑定的事件的事件名，全部都是js的事件名：
   @submit   --->  onsubmit
   @focus    --->  onfocus
   @blur     --->  onblur
   @click    --->  onclick
   ....
    栗子:

完成商城购物车中的商品增加或者减少

步骤:
1:给vue对象添加操作数据的方法
2:在标签中使用指令调用操作数据的方法


DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="js/vue.js">script>
head>
<body>
    <div id="box">
        <button @click="++num">+button>
        <input type="text" v-model="num">
        <button @click="sub">-button>
    div>

    <script>
        let vm = new Vue({
            el:"#box",
            data:{
                num:0,
            },
            methods:{
                sub(){
                    if(this.num<=1){
                        this.num=0;
                    }else{
                        this.num--;
                    }
                }
            }
        })
    script>
body>
html>


    



    返回首页
    
						  
					  
    
						
							
    

						
    
							
							
			Vue学习							
						



						
    
						
						
    

						

						
					
    
					
    
					
					
    
						
    相关
    
						

    				
						
			            
            
            
                                    
           
  			
						

					
    
					
				
    

				
    
														
					
					

					
									
    
					
									   
    标签