Vue_day01

1. 认识vue

1.1 什么是vue

(1)Vue是构建界面的渐进式的js框架

(2)只关注视图层，采用自底向上增量开发的设计。

(3)Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 --数据双向绑定

一句话:vue就是做界面的js框架 (jquery/easyui)

1.2vue怎么使用

(1)在项目里面运行 npm install vue

(2)在页面引入vue.js

(3)测试代码

 <body>

     <div id="app">

         {{name}}

     </div>

 <script>

     new Vue({

        el:"#app",

         data:{

            name:"xxxx"

         }

     });

 </script>

1.3 el挂载

el:挂载,把vue这个对象挂载到对应的标签上面去

el方式:

(1)id的方式进行挂载

 <body>

     <div id="app">

         {{name}}

     </div>

 <script>

     new Vue({

        el:"#app",

         data:{

            name:"xxxx"

         }

     });

 </script>

(2) class方法进行挂载

 <body>

     <div class="app">

         {{name}}

     </div>

 <script>

     new Vue({

        el:".app",

         data:{

            name:"xxxx"

         }

     });

 </script>

1.4 data数据

data:放字符串对象和数组都OK

data: {
    "show": true,
    "hidden": false,
    "score": 66
}

1.5 methods方法

方法methods:

methods:{
    changeData(){
        console.log(this.msg);
    }
}

1.6 vue的生命周期

1.7 数据的双向绑定

 <body>

 <div id="app">

     <input type="text" v-model="msg" v-on:change="changeData"/>

     <div>

         {{msg}}

     </div>

 </div>

 </body>

 <script>

     var app = new Vue({

         el: "#app",

         data: {

             name: "信息",

             msg: "test"

         },

         methods:{

             changeData(){

                 console.log(this.msg);

             }

         }

     });

 </script>

2.vue指令

2.1 v-for

循环

 <body>

 <div id="app">

     循环数组

     <ul>

         <li v-for="hobby in hobbys">

             {{hobby}}

         </li>

     </ul>

     <hr>

     循环对象

     <ul>

         <li v-for="u in user">

             {{u}}

         </li>

     </ul>

     <hr/>

     带索引循环数组

     <ul>

         <li v-for="(hobby,index) in hobbys">

             {{hobby}}==={{index}}

         </li>

     </ul>

     <hr/>

     循环对象

     <ul>

         <li v-for="(value, key, index) in user">

             {{key}} == {{value}} ---> {{index}}

         </li>

     </ul>

     <hr/>

     循环json数据

     <table>

         <thead>

             <tr>id</tr>

             <tr>name</tr>

             <tr>age</tr>

             <tr>sex</tr>

         </thead>

         <tbody>

         <tr v-for="student in students">

             <td>{{student.id}}</td>

             <td>{{student.name}}</td>

             <td>{{student.age}}</td>

             <td>{{student.sex}}</td>

         </tr>

         </tbody>

     </table>

 </div>

 </body>

 <script>

     var app = new Vue({

         el:"#app",

         data: {

             user: {

                 name: "德莱文",

                 age: 18,

                 sex: "男"

             },

             hobbys: ["打篮球", "踢足球", "打羽毛球"],

             students: [

                 {id: 1, name: "刘备", age: 29, sex: "男"},

                 {id: 2, name: "貂蝉", age: 30, sex: "女"},

                 {id: 3, name: "吕布", age: 31, sex: "男"}

             ]

         }

     });

 </script>

2.2 v-bind

绑定的标签里面属性的值

 <body>

 <div id="app">

     <img width="100" src="img/11.jpg"/>

     <img width="100" v-bind:src="imgSrc">

     <img width="100" :src="imgSrc"/>

     <input type="text" name="username"/>

     <input v-bind="props"/>

 </div>

 </body>

 <script>

     var app = new Vue({

         el: "#app",

         data: {

             imgSrc:"img/11.jpg",

             props:{

                 type:"text",

                 name: "username"

             }

         }

     });

 </script>

2.3 v-show

控制display这个属性

<body>

<div id="app">

    <div v-show="show">show show show ...</div>

    <div v-show="hidden">hidden hidden hidden...</div>

    <div v-show="score > 80">if if if</div>

</div>

</body>

<script>

    var app = new Vue({

        el: "#app",

        data: {

            "show":true,

            "hidden":false,

            "score":66

            }

    });

</script>

2.4 v-if/else

如果不成立 ,在页面无法看到

 <body>

 <div id="app">

     <div v-if="age , 18">你还年轻，还可以玩一下</div>

     <div v-else-if="age > 20  && age < 60">小伙子，我这里有一本java的秘籍要不要看一看？</div>

     <div v-else>

         可以退休啦~~

     </div>

 </div>

 </body>

 <script>

     var app = new Vue({

         el: "#app",

         data: {

             "show": true,

             "hidden": false,

             "score": 66

         }

     });

 </script>

2.5 v-model

控制标签里面value 完成双向绑定

 <body>

 <div id="app">

     绑定普通的字符串值

     <input v-model="inputValue" />

     {{inputValue}}

     <h1>绑定到type=checkbox的input表单元素</h1>

     打篮球:<input type="checkbox" v-model="checkboxValue" value="打篮球"><br/>

     踢足球:<input type="checkbox" v-model="checkboxValue" value="踢足球"><br/>

     data中的值:{{checkboxValue}}

     <h1>绑定到type=radio的input表单元素</h1>

     打篮球:<input type="radio" v-model="radioValue" value="打篮球"><br/>

     踢足球:<input type="radio" v-model="radioValue" value="踢足球"><br/>

     data中的值:{{radioValue}}

     <h1>绑定到文本域的值</h1>

     <textarea v-model="textAreaValue"></textarea>

     data中的值:{{textAreaValue}}

     下拉的值

     <select v-model="skills">

         <option value="rap">rap</option>

         <option value="唱">唱</option>

         <option value="跳">跳</option>

     </select>

     {{skills}}>

 </div>

 </body>

 <script>

     var app = new Vue({

         el: "#app",

         data: {

             inputValue:"输入的text值",

             checkboxValue:["踢足球"],

             radioValue:"打篮球",

             textAreaValue: "溜了溜了...",

             sills:"唱"

         }

     });

 </script>

vue_day01的更多相关文章

随机推荐

sublime sftp插件安装及时更新网站
Sublime Text 2 本身并不强大,但是它方便使用插件扩展功能,所以变得很强大.今天介绍一个很实用的插件 SFTP ,可以大大提高前端工作效率. 常见的工作流程有时候修改一些网站上的文件,通 ...
Android小记(整理一下自己犯过的错误)
时间:2019/12/20 如题,写这篇博客的原因主要是为了记录自己在Android编程中犯的一些低级的错误,以此警戒自己不要出现类似的错误. 1.在监听按钮的点击事件时,如果使用的是实现View.O ...
C语言系列之预处理指令、循环左移函数的使用（四）
本章节将讲两个知识点第一个知识点:常用的预处理指令第二个知识点:循环左移右移函数第一个知识点:预处理指令一种预处理指令是#define,他把名字A定义为P0,当这个名字出现在源文件的任何地方时 ...
windows下使用pycharm配置python的virtualenv环境
环境:win10 python2.7.10(64) 在path中配置python环境注意:我这边的环境是py2和py3共存的,但是我这边默认使用的是py2. 在virtualenv环境中安装指定的p ...
Codeforces_817
A.要求坐标差为移动距离的两倍. #include<bits/stdc++.h> using namespace std; int main() { ios::sync_with_stdi ...
HDU 6599 I Love Palindrome String (回文树+hash)
题意找如下子串的个数: (l,r)是回文串,并且(l,(l+r)/2)也是回文串思路本来写了个回文树+dfs+hash,由于用了map所以T了后来发现既然该子串和该子串的前半部分都是回文串,所 ...
get post 区别【转】
应该是最简洁直接的了???? Get:是以实体的方式得到由请求URI所指定资源的信息,如果请求URI只是一个数据产生过程,那么最终要在响应实体中返回的是处理过程的结果所指向的资源,而不是处理过程的描述 ...
RabbitMQ安装与使用
官网地址: http://www.rabbitmq.com/ 安装Linux必要依赖包下载RabbitMQ必须安装包进行安装,修改相关配置文件即可步骤 1.准备: yum install gcc ...
python学习（7）关于列表操作相关命令以及浅复制深复制
在python中,[]表示的是列表.列表有各种操作命令. 1.append()方法,添加一个元素到列表尾部. 注意append()方法与extend()方法有区别:list.append(object ...
【Java并发工具类】CountDownLatch和CyclicBarrier
前言下面介绍协调让多线程步调一致的两个工具类:CountDownLatch和CyclicBarrier. CountDownLatch和CyclicBarrier的用途介绍 CountDownLat ...

vue_day01