Vue.js学习

一、安装vue

　　npm install vue -g

　　https://www.runoob.com/vue2/vue-install.html

二、第一个vue

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>ddd</title>
 5     <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript"></script>
 6 </head>
 7 <body>
 8     <div id="app">
 9       <p>{{ message }}</p>
10     </div>
11     <script>
12         new Vue({
13             el: '#app',
14           data:{
15               message: "xxxxxxxxx"
16           }
17         });
18     </script>
19 </body>
20 </html>

　　el挂载点，data数据对象

三、vue指令：

　　1、内容绑定，事件绑定  

　　　　v-text  v-html v-on

　　2、显示切换，属性绑定

　　　　v-show v-if v-bind

　　3、列表循环、表单元素绑定

四、事列

　　1、v-text

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>ddd</title>
 5     <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript"></script>
 6 </head>
 7 <body>
 8     <div id="app">
 9         <h2 v-text="message + '##'">深圳</h2>
10       <h2>{{message +"##" }}</h2>
11     </div>
12     <script>
13         new Vue({
14             el: '#app',
15           data:{
16               message: "xxxxxxxxx"
17           }
18         });
19     </script>
20 </body>
21 </html>

　　v-html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>ddd</title>
 5     <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript"></script>
 6 </head>
 7 <body>
 8     <div id="app">
 9         <p v-html="content"></p>
10     </div>
11     <script>
12         new Vue({
13             el: '#app',
14           data:{
15               content: "<a href='#'>dddd</a>"
16           }
17         });
18     </script>
19 </body>
20 </html>

　　v-on指令

<!DOCTYPE html>
<html>
<head>
    <title>ddd</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        {{message}}
        <!-- v-on与@一样的东西 -->
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="@指令" @click="doMe">
        <!-- 双击事件 -->
        <input type="button" value="@双击事件" @dbclick="doIt">
    </div>
    <script>
        new Vue({
          el: '#app',
          data:{
              content: "<a href='#'>dddd</a>",
              message: "xxxx",
          },
          methods:{
              doIt: function(){
                  alert("it")
              },
              doMe: function(){
                  this.message = "tttttttt"
                  alert("做自己")
              }
          }
        });
    </script>
</body>
</html>

　　v-show

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>ddd</title>
 5     <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript"></script>
 6 </head>
 7 <body>
 8     <div id="app">
 9       <!-- v-show表达式的真假，切换元素 -->
10       <img src="地址" v-show="true">
11       <img src="地址" v-show="isShow">
12       <img src="地址" v-show="age>=18">
13     </div>
14     <script>
15         new Vue({
16             el: '#app',
17           data:{
18               message: "xxxxxxxxx",
19               isShow: false
20           }
21         });
22     </script>
23 </body>
24 </html>

　　v-if

 1 <div id="app">
 2     <p v-if="seen">现在你看到我了</p>
 3     <template v-if="ok">
 4       <h1>菜鸟教程</h1>
 5       <p>学的不仅是技术，更是梦想！</p>
 6       <p>哈哈哈，打字辛苦啊！！！</p>
 7     </template>
 8 </div>
 9     
10 <script>
11 new Vue({
12   el: '#app',
13   data: {
14     seen: true,
15     ok: true
16   }
17 })
18 </script>

　　v-bind 设置元素的属性src title class

 1 <div id="app">
 2       <p data-message="{{message}}">111</p>
 3     </div>
 4     <script>
 5         new Vue({
 6             el: '#app',
 7           data:{
 8               message: "xxxxxxxxx"
 9           }
10         });
11     </script>

　　{{message}}在属性中或者""中是不能获取data的message的值，需要使用bind事件来改变属性的值

　图片切换

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>ddd</title>
 5     <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript"></script>
 6 </head>
 7 <body>
 8     <div id="app">
 9         <img v-bind:src="imgArr[index]">
10         <a href="#" @click="prev" v-show="index!=0">上一章</a>
11         <a href="#" @click="next" v-show="index<imgArr.length">下一章</a>
12     </div>
13     <script>
14         new Vue({
15           el: '#app',
16           data:{
17               imgArr:[],
18               index: 0,
19           },
20           methods:{
21               prev: function(){
22 
23               },
24               next: function(){
25 
26               }
27           }
28         });
29     </script>
30 </body>
31 </html>

 　　v-for

<!DOCTYPE html>
<html>
<head>
    <title>ddd</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in arr" :title="item"></li>
        </ul>
    </div>
    <script>
        new Vue({
          el: '#app',
          data:{
              arr:[1,3,34]
          },
          methods:{
              
          }
        });
    </script>
</body>
</html>

　　v-model 获取和设置表单元素的值

<!DOCTYPE html>
<html>
<head>
    <title>ddd</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <input type="text" name="" v-model="message">
        {{message}}
    </div>
    <script>
        new Vue({
          el: '#app',
          data:{
              message: "xxdeee",
          },
          methods:{
              
          }
        });
    </script>
</body>
</html>

　　axios基本使用

 

　　

 

posted @ 2020-03-07 18:20  WithSuper  阅读(167)  评论(0)    收藏  举报