vue小白入门教程之笔记代码

vue小白入门(学习笔记)

初学vue

vue引用:

在线引用:

 <script src="https://unpkg.com/vue"> </script>

本地引用:(确定自己的vue.js的路径)

<script type="text/javascript" src="js/vue.js" ></script>

vue对象实例化

JavaScript中的代码(单独的js文件 index.js)

window.onload=function(){  
 //单独的文件最好用到预加载（window.οnlοad=function(){}）
 //否则可能无法实现index.js的某些功能（html文档是顺序加载，而预加载可以先加载完整个HTML文档）
var app=new vue({
  el:"#app",    //需要操作的容器的id为"app" (如 某个div，某个ul 等容器)
  data{         //数据用变量保存(name变量保存 张三),data中的变量为全局变量
     name:"张三"，
     age:20
  },
  methods:{   //编写方法，当methods中的某个方法被调用时，methods中的其他的方法都被调用
      login:function(){
              alert("登录");
            },
      registered:function(){
            document.write("注册");
      }
  },
  computed:{  //计算属性，当computed中的某个方法被调用时，computed中的其他的方法不被调用
     login:function(){
              alert("登录");
            },
      registered:function(){
            document.write("注册");
      }
  }
});
}

HTML中的代码：

    <div id="app">
         {{name}}-{{age}}
    </div>

效果图:

vue数据及方法

vue数据

JavaScript:

 var app=new vue({
      el:"#app",    
     data {         //数据保存
         name:"张三",
         age:20
   }
 })

vue方法

 var app=new vue({
      el:"#app",    
     data {         //数据保存
         name:"张三",
         age:20
   },
   methods:
       {
          login:function(){
              alert("登录");
            },
         registered:function(){
          return "注册";
      }
      }
 })

Html：

    <div id="app">
         {{name}}-{{age}}
         <button > 登录  </button>
		 <p>{{registered()}}</p>
    </div>

上图:

vue阻止默认事件

once：点击一次后停止
prevent:阻止默认事件
stop:取消冒泡事件
三者的使用相同
就只举例once:

   <button v-on:click.once="login()"> 登录  </button> //点击一次弹窗后，第二次点击不在弹窗

vue 键盘事件及双向绑定数据

• enter
• tab
• delete (捕获“删除”和“退格”键)
• esc
• space
• up
• down
• left
• right
  html部分代码

   <input ref="name" type="text" v-on:keyup.enter="user"/>
   //只有按回车健后才能完成输入的值,通过user方法实现

js代码

 methods:{  
      login:function(){
              alert("登录");
            },
      registered:function(){
          return "注册"
      },
      user:function(){    //绑定name属性
        this.name=this.$refs.name.value;
      	return this.name;
      }
  }

注：ref的值要和$refs.的值一样（ref="name",$refs.name）

如图：

Html部分代码

<button v-on:click="changeColor=!changeColor">变色</button>
<button v-on:click="changeLength=!changeLength">变长</button>
	 <div v-bind:class="compClasses">
	<span>Hery</span>
</div>

JavaScript部分代码：

 computed: {  
     login:function(){
              alert("登录");
          },
     registered:function(){
            document.write("注册");
      },
     compClasses:function(){
      	 return{
      	 	changeColor:this.changeColor,
      	 	changeLength:this.changeLength
      	 }
      }
  }

CSS部分:

span{
	background: red;
	display: inline-block;
	padding: 10dx;
	color: #fff;
	margin: 10px 0;
	cursor: pointer;
}
.changeColor span{
	background: dodgerblue;
}
.changeLength span{
	width:100px;
	content:"Length";
	/*margin-left: 10px;*/
}

vue 指令v-if

HTML

<h1>v-if 条件</h1>
    <button v-on:click="error=!error">错误</button>
    				<button v-on:click="success=!success">成功</button>
    				<p v-if="error">网络连接错误404</p>
    				<p v-else-if="success">网络连接成功200</p>

JavaSrcipt

 data:{         
     name:"张三",
     age:20,
     changeColor:false,
     changeLength:false,
     error:false,
     success:false
  },

当点击错误时，成功将没有效果，再次点击掉错误时将显示成功的效果

vue v-for 指令

Html：

<div>
				<h1>v-for</h1>
				<!--
                	作者：offline
                	时间：2019-05-30
                	描述：数组遍历
                -->
                <ul>
                	<li v-for="character in characters">
                		{{character}}
                	</li>
                </ul>
                <ul>
                	<li v-for="(user,index) in users">
                		{{index+1}}.{{user.name}}-{{user.age}}
                	</li>
                </ul>
			</div>

JavaScript:

data:{         
     name:"张三",
     age:20,
     changeColor:false,
     changeLength:false,
     error:false,
     success:false,
     characters:["Mario","Luffy","Yoshi"],
     users:[
           {name:"Henry",age:30},
           {name:"Bucky",age:25},
           {name:"Emily",age:20},
     ]
  },

如下图:

本文章由@先dl原创，持续更新中。。。。。。