vuejs入门实例讲解

淩亂°似流年 2022-04-11 13:54 485阅读 0赞

vuejs是一个前端javascript框架，集各种操作和方法于一身的框架，可以取代jQuery在项目中使用，个人感觉，vue和angular框架很像，都有双向绑定的属性，也是一个模板框架，不改变html结构就可以使用的模板。提供了自定义组件功能，支持ajax操作。vue本身又有点像react，可以用vuejs开发前端页面，也可以npm install 的方式安装vue，然后用来和node结合开发。

vuejs在页面上的用法和angularjs很像，先准备好html模板，模板上准备好需要展示的数据如：

  1. <div id="container">
  2.        <input type="text" v-model="username"/>
  3. </div>

这里的username就需要在js中指定：

  1. new Vue({
  2.       el:"#container",
  3.       data:{
  4.            username:"vuejs"
  5.      }
  6. });

el是页面上一个包含input元素的父级或者祖先元素id，变量username需要声明在data属性下面。如果有方法，还需要添加methods属性。

下面介绍vuejs入门实例：页面上需要引入vue.js

1、双向绑定：

html

  1. <div class="box">
  2.     <h2>1、数据双向绑定(v-model,v-html,{
  3.    {}})：</h2>
  4.     <label for="username">用户名：</label>
  5.     <input type="text" name="username" v-model="username"/>
  6.     <div>双向绑定：{
  7.    {username}}</div>
  8. </div>

js

  1. var data = new Vue({
  2.   el:"#container",
  3.   data:{
  4.     username:"vuejs"
  5.   }
  6. })

运行效果如下：

20181206174334630.gif

2、事件绑定，事件绑定推荐写法是v-on:eventname=funtion，但是也有简写方法@:eventname=function。

html

  1. <div class="box">
  2.     <h2>2、事件(v-on,@)：</h2>
  3.     <div v-html="message"></div>
  4.     <a v-on:click="renderOk">click</a>
  5. </div>

js

  1. var data = new Vue({
  2.     el:"#container",
  3.     data:{
  4.         message:"this is a message"
  5.     },
  6.     methods:{
  7.         renderOk:function(){
  8.             this.message = "click ok";
  9.         }
  10.     }
  11. });

运行效果如下：

20181206174943493.gif

3、条件判断：条件判断的html写法就是v-if，条件为真，则显示，为假则不显示，另外v-show也具有相同的功能。

html

  1. <div class="box">
  2.     <h2>3、条件(v-if v-show)：</h2>
  3.     <div v-if="ok">v-if="ok"</div>
  4.     <div v-show="show">show is true</div>
  5. </div>

js

  1. var data = new Vue({
  2.     el:"#container",
  3.     data:{
  4.         ok:true,
  5.         show:true
  6.     }
  7. });

运行效果如下：

20181206175506418.png

4、for循环，循环的对象可以是数组，也可以是json对象。

html

  1. <div class="box">
  2.     <h2>4、for循环(v-for)：</h2>
  3.     <ul v-for="item in list">
  4.         <li>id:{
  5.    {item.id}} | name:{
  6.    {item.name}} | age:{
  7.    {item.age}}</li>
  8.     </ul>
  9. </div>

js

  1. var data = new Vue({
  2.     el:"#container",
  3.     data:{
  4.         list:[
  5.             {id:101,name:"aaa",age:10},
  6.             {id:102,name:"bbb",age:20},
  7.             {id:103,name:"ccc",age:30}
  8.         ]
  9.     }
  10. });

显示效果如下：

20181206175912336.png

5、自定义组件

html

  1. <div class="box">
  2.     <h2>5、自定义组件：</h2>
  3.     <hello></hello>
  4. </div>

js 

  1. var helloComponent = Vue.component("hello",{
  2.         template:"<h3>hello,vue,this is a component by hello.</h3>"
  3. });

20181206180035848.png

6、ajax请求，这里需要将vue-resource.js加入，它是用来支持ajax请求的，是不是很像angularjs-resource。angular里面的ajax请求也是需要额外添加js库，使用的也是$http的api来请求。

html

  1. <div class="box">
  2.     <h2>6、ajax($http.get $http.post)：</h2>
  3.     <div>这里需要将vue-resource.js加入进来</div>
  4.     <a @click="requestData">ajax</a>
  5.     <ul v-for="user in users">
  6.         <li>ID:{
  7.    {user.id}} | Name:{
  8.    {user.name}} | age:{
  9.    {user.age}}</li>
  10.     </ul>
  11. </div>

js

  1. var data = new Vue({
  2.     el:"#container",
  3.     data:{
  4.         users:[]
  5.     },
  6.     methods:{
  7.         requestData:function(){
  8.             var self = this;
  9.             this.$http.get("/response/list.json").then(function(data){
  10.                 this.users = data.body;
  11.             },function(){
  12.                 console.log("request error.")
  13.             });
  14.         }
  15.      }
  16. });

response/list.json的内容：

[{“id”:201,”name”:”eee”,”age”:30},
{“id”:202,”name”:”fff”,”age”:30},
{“id”:203,”name”:”ddd”,”age”:30}]

20181206180459671.gif

以上几个示例的完整代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>vue-toturial</title>
  6.     <style type="text/css">
  7.         *{margin:0;padding:0;font-size: 100%;font-weight:normal;}
  8.         h2{font-size:18px;font-weight: bold;color:green;}
  9.         input{height:25px;line-height: 25px;}
  10.         #container{margin:20px auto;width:800px;}
  11.         .box{border:1px solid #ddd;padding:10px;margin-top:5px;border-radius: 2px;}
  12.         a{text-decoration: underline;cursor: pointer;}
  13.         ul{list-style: none;}
  14.     </style>
  15. </head>
  16. <body>
  17.     <div id="container">
  18.         <div class="box">
  19.             <h2>1、数据双向绑定(v-model,v-html,{
  20.    {}})：</h2>
  21.             <label for="username">用户名：</label>
  22.             <input type="text" name="username" v-model="username"/>
  23.             <div>双向绑定：{
  24.    {username}}</div>
  25.         </div>
  26.         <div class="box">
  27.             <h2>2、事件(v-on,@)：</h2>
  28.             <div v-html="message"></div>
  29.             <a v-on:click="renderOk">click</a>
  30.         </div>
  31.         <div class="box">
  32.             <h2>3、条件(v-if v-show)：</h2>
  33.             <div v-if="ok">v-if="ok"</div>
  34.             <div v-show="show">show is true</div>
  35.         </div>
  36.         <div class="box">
  37.             <h2>4、for循环(v-for)：</h2>
  38.             <ul v-for="item in list">
  39.                 <li>id:{
  40.    {item.id}} | name:{
  41.    {item.name}} | age:{
  42.    {item.age}}</li>
  43.             </ul>
  44.         </div>
  45.         <div class="box">
  46.             <h2>5、自定义组件：</h2>
  47.             <hello></hello>
  48.         </div>
  49.         <div class="box">
  50.             <h2>6、ajax($http.get $http.post)：</h2>
  51.             <div>这里需要将vue-resource.js加入进来</div>
  52.             <a @click="requestData">ajax</a>
  53.             <ul v-for="user in users">
  54.                 <li>ID:{
  55.    {user.id}} | Name:{
  56.    {user.name}} | age:{
  57.    {user.age}}</li>
  58.             </ul>
  59.         </div>        
  60.     </div>
  61. </body>
  62. <script type="text/javascript" src="js/vue.js"></script>
  63. <script type="text/javascript" src="js/vue-resource.js"></script>
  64. <script type="text/javascript">
  65.     var helloComponent = Vue.component("hello",{
  66.         template:"<h3>hello,vue,this is a component by hello.</h3>"
  67.     });
  68.     var data = new Vue({
  69.         el:"#container",
  70.         data:{
  71.             username:"vuejs",
  72.             message:"this is a message",
  73.             ok:true,
  74.             show:true,
  75.             list:[
  76.               {id:101,name:"aaa",age:10},
  77.               {id:102,name:"bbb",age:20},
  78.               {id:103,name:"ccc",age:30}
  79.             ],
  80.             users:[]
  81.         },
  82.         methods:{
  83.             renderOk:function(){
  84.                 this.message = "click ok";
  85.             },
  86.             requestData:function(){
  87.                 var self = this;
  88.                 this.$http.get("/response/list.json").then(function(data){
  89.                     this.users = data.body;
  90.                 },function(){
  91.                     console.log("request error.")
  92.                 });
  93.             }
  94.         }
  95.     });
  96. </script>
  97. </html>

这个实例总结了vuejs常用的功能，如双向绑定，条件判断，for循环，事件绑定，以及ajax请求。

另外给出一个示例：通过前面介绍的一些方法，编写一个简单的列表添加，删除的操作，效果如下：

20181206180645808.gif

html+css+js代码：

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <title>vuejs</title>
  5.     <meta charset="UTF-8"/>
  6.     <style type="text/css">
  7.         #app{max-width: 800px;margin: 0 auto;}
  8.       #app input{height:28px;line-height: 28px;border:1px solid #ddd;
  9. outline: none;border-radius:3px;}
  10.       #app input:focus{border-color:#95B8E7;}
  11.       #app select{width:174px;padding:2px;border:1px solid #ddd;outline: none;
  12. border-radius: 3px;height:30px;border-radius: 3px;}
  13.       #app button{height:28px;border-radius:3px;border:1px solid #b7d2ff;
  14. background: #577eb2;color:#fff;cursor: pointer;}
  15.       ul{list-style: none;margin:0;padding:0;border-bottom:1px solid #ddd;}
  16.       ul li{border:1px solid #ddd;border-bottom:none;}
  17.       .list-item{line-height: 42px;}
  18.       .list-item span,.list-item a{display:inline-block;width:194px;text-align: center;}
  19.       .list-item a{cursor: pointer;}
  20.       li span{display: inline-block;width:100px;height: 40px;}
  21.       .box-item{padding:5px 0;}
  22.       .box-item label{width:100px;text-align: right;display: inline-block;}
  23.     </style>
  24. </head>
  25. <body>
  26.     <div id="app">
  27.          <fieldset>
  28.               <legend>Create User</legend>
  29.               <div class="box-item">
  30.                   <label>Name:</label>
  31.                   <input type="text" v-model="user.name"/>
  32.               </div>
  33.               <div class="box-item">
  34.                   <label>Age:</label>
  35.                   <input type="text" v-model="user.age"/>
  36.               </div>
  37.               <div class="box-item">
  38.                   <label>Sex:</label>
  39.                   <select v-model="user.sex">
  40.                        <option value="male">male</option>
  41.                        <option value="female">female</option>
  42.                   </select>
  43.               </div>
  44.               <div class="box-item">
  45.                     <button @click="createUser">Create</button>
  46.               </div>
  47.          </fieldset>
  48.          <div class="table-list">
  49.                <ul>
  50.                       <li class="list-item item-head">
  51.                         <span>Name</span>
  52.                         <span>Age</span>
  53.                         <span>Sex</span>
  54.                         <span>Operation</span>
  55.                       </li>
  56.                    <li class="list-item" v-for="(item,index) in peoples">
  57.                         <span>{
  58.    {item.name}}</span>
  59.                         <span>{
  60.    {item.age}}</span>
  61.                         <span>{
  62.    {item.sex}}</span>
  63.                         <a @click="deleteUser(index)">Delete</a>
  64.                    </li>
  65.                </ul>
  66.          </div>
  67.     </div>
  68.     <script type="text/javascript" src="js/vue.js"></script>
  69.     <script>
  70.          var data = 
  71.          new Vue({
  72.              el:'#app',
  73.              data:{
  74.                 user:{name:'',age:0,sex:'male'},
  75.              peoples:[
  76.                   {name:'aaa',age:'30',sex:'male'},
  77.                   {name:'xxx',age:'18',sex:'female'},
  78.                   {name:'yyy',age:'30',sex:'male'},
  79.                   {name:'www',age:'29',sex:'male'}
  80.               ]
  81.             },
  82.             methods:{
  83.                 deleteUser:function(index){
  84.                     this.peoples.splice(index,1);
  85.                 },
  86.                 createUser:function(){
  87.                     this.peoples.push(this.user);
  88.                     this.user = {name:'',age:0,sex:'male'};
  89.                 }
  90.             }
  91.          });
  92.     </script>
  93. </body>
  94. </html>

发表评论

表情：
评论列表 （有 0 条评论，485人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vuejs入门实例讲解

    vuejs是一个前端javascript框架，集各种操作和方法于一身的框架，可以取代jQuery在项目中使用，个人感觉，vue和angular框架很像，都有双向绑定的属性，也是

    淩亂°似流年淩亂°似流年/ 0 赞/ 486 阅读