首页 > Web开发 > 详细

Vue.js

时间：2020-05-30 09:51:26      阅读：45      评论：0      收藏：0      [点我收藏+]

Vue.js

###引入Vue.js

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

1`创建Vue.js项目

 1`cnpm install vue
 //安装稳定版Vue
 2`cnpm install --global vue-cli
 //创建基于webpack模板新项目
 3`vue init webpack my-project
 //配置项目名称等 一直enter
 4`cd my-project
 //进入项目
 5`cnpm install
 //安装项目
 6`cnpm run dev
 //启动项目，监听8080端口

2`Vue.js项目目录结构

 

目录/文件说明
build 项目构建(webpack)相关代码
config 配置目录，包括端口号等。我们初学可以使用默认的。
node_modules npm 加载的项目依赖模块
src 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等。components: 目录里面放了一个组件文件，可以不用。App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。main.js: 项目的核心文件。
static 静态资源目录，如图片、字体等。
test 初始测试目录，可删除
.xxxx文件 这些是一些配置文件，包括语法配置，git配置等。
index.html 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档，markdown 格式

 

3`Vue 实例

 <div id="vue1">
         <label>修改颜色</label>//标签
         <p>{{ok?"fk":"cc"}}</p>
         <input v-model="use" type="checkbox">
         <p v-bind:class="{‘class1‘:use}" v-if="ok">Lorem ipsum dolor sit amet.</p>
 </div>
 <script>
     new Vue({
         el:"#vue1",
         data:{
             use:false,
             ok:true
         }
     })
 </script>

 

4`Vue选择器

 <script>
     new Vue({
         el:"#vue1",//el:".vue1"  适用类选择器·ID选择器

5`Vue指令

1·v-text传输替换文本值

写法：

①<h2 v-text=‘message‘></h2>//全部替换

②<h2>毕节{{message}}</h2>//部分替换

2·v-html传输替换html标签

写法:

#<p v-html=‘content‘></p>//html中

#data:{content:’.com}

3`v-on或者@为元素绑定事件

写法：

①#<input v-on:事件名=’方法’>//html中

#methods:{方法:function(){}}//js中

②#<input @事件名=’方法’>//html中

#methods:{方法:function(){}}//js中

实例：

 #<!-- 与用户交互v-on -->
     <div id="app">
         <p>{{message}}</p>
         <button v-on:click=‘remove‘>点击翻转</button>
     </div>
     <script>
         var app = new Vue({
             el:‘#app‘,
             data:{
                 message:‘Hello‘
             },
             methods: {
                 remove:function(){
                 this.message = this.message.split(‘‘).reverse().join(‘‘)
                 }
             }
         })
     </script>

 

事件名：

1`click

2`monseenter

3`dbclick

4`…

4`v-show以真假决定显示隐藏

写法：

#<img v-show=‘布尔值(t/f)/age>=18‘>//html中

#data:{isShow:true}//js中，通过改变isShow决定是否显示(t/f)

实例：

 #<!-- v-show实例 -->
     <div id="app">
         <img src="./my-project/build/logo.png" v-show=‘isShow‘>
         <button @click=‘change‘>改变</button>
     </div>
     <script>
         var app = new Vue({
             el:‘#app‘,
             data:{
                 isShow:false
             },
             methods: {
                 change:function(){
                     this.isShow = !this.isShow;//取反
                 }
             }
         })
     </script>

 

5`v-if以真假决定元素的增加删除(操作DOM树)

写法：

类似于v-show

实例:

 #<!-- 显示删除元素v-if -->
     <div id="app">
         <p v-if=‘seen‘>可以看见</p>
     </div>
     <script>
         var app = new Vue({
             el:‘#app‘,
             data:{
                 seen: true
             }
         })
     </script>

 

6`v-bind设置元素的属性（css）

写法：

#<a v-bind:属性名=表达式></a>

#//直接在属性前添加冒号,简写

#<img :class=‘isActive?’active’:’’">//添加类名

实例：

 #<!-- v-bind实例 -->
     <div id="app">
         <img v-bind:src="url">
         <p :class="isActive?‘active‘:‘‘"  @click=‘change1‘></p>
         //三元表达式
         <p :class="{active:isActive}"  @click=‘change1‘></p>
         //简写，同上
         <input type="button" @click=‘change‘ value="切换">
     </div>
     
     <script>
         var app = new Vue({
             el:‘#app‘,
             data:{
                 url:‘./my-project/build/logo.png‘,
                 isActive:true
             },
             methods: {
                 change:function(){
                     this.url= ‘./mario.jpg‘
                 },
                 change1:function(){
                     this.isActive = !this.isActive;
                 }
             }
         })
     </script>

 

7`v-for根据数据生成列表结构

写法：

#<ul><li v-for=‘item in arr‘></li></ul>//html

#data:{arr:[1,2,3,4,5]}}//js

实例:

 #<!-- v-for实例 -->
    <div id="app">
         <input type="button" value="增加" @click=‘add‘>
         <input type="button" value="减少" @click=‘remove‘>
         <ul>
             <li v-for=‘(acc,index) in arr‘>
                 {{acc}} {{index}} foresthan.com
             </li>
         </ul>
         <h2 :title=‘Hello‘ v-for=‘bcc in bcc‘>
             {{bcc}}
         </h2>
     </div>
     <script>
         var app = new Vue({
             el:‘#app‘,
             data:{
                 arr:[1,2,3,4,5],
                 Hello:‘hello‘,
                 bcc:[1,2,3]
             },
             methods: {
                 add:function(){
                     this.arr.push(‘!‘)
                 },
                 remove:function(){
                     this.arr.shift();
                 }
             }
         })
     </script>

 

8`v-on补充-传递自定义参数，事件修饰符

写法:

#<input @事件名=‘方法（形参）’>//html

#metods:{方法：function(形参)}//js传递自定义参数

#<input @事件名.事件修饰=’方法’>//事件修饰符

实例：

#<!-- 与用户交互v-on -->
   <div id="app">
        <p>{{message}}</p>
        <button v-on:click=‘remove‘>点击翻转</button>
    </div>
    <script>
        var app = new Vue({
            el:‘#app‘,
            data:{
                message:‘Hello‘
            },
            methods: {
                remove:function(){
                this.message = this.message.split(‘‘).reverse().join(‘‘)
                }
            }
        })
    </script>
#<!-- v-on补充实例 -->
   <div id="app">
        <input type="button" value="点击" @click="doIt(666,‘老铁‘)">
        <input type="text" @keyup.enter=‘keyup‘>
    </div>
    <script>
        var app = new Vue({
            el:‘#app‘,
            methods: {
                doIt:function(p1,p2){
                    console.log(‘ok‘)
                    console.log(p1)
                    console.log(p2)
                },
                keyup:function(){
                    console.log(‘吃了没‘)
                }
            }
        })
    </script>

 

9`v-model获取设置表单元素的值（双向绑定）

写法：

#<input v-model=‘message‘>//html

实例:

3<!-- v-model双向绑定 -->
    <div id="app">
        <p>{{message}}</p>
        <input type="text" v-model=‘message‘ @keyup.enter=‘get‘>
    </div>
    <script>
        var app = new Vue({
            el:‘#app‘,
            data:{
                message:‘Hello‘
            },
            methods: {
                get:function(){
                    console.log(this.message)
                }
            }
        })
    </script>

 

6`Vue实例

1·计数器

#<!-- 计数器案例 -->
    <div id="app">
        <button @click=‘cut‘>-</button>
        <span>{{message}}</span>
        <button @click=‘add‘>+</button>
    </div>
    <script>
        var app = new Vue({
            el:‘#app‘,
            data:{
                message:0
            },
            methods: {
                cut:function(){
                    if(this.message>0){
                        this.message--
                    }else{
                        console.log(‘太小了‘)
                    }
                },
                add:function(){
                    if(this.message<10){
                        this.message++
                    }else{
                        console.log(‘太大了‘)
                    }
                }
            }
        })
    </script>

2`图片切换

#<!-- 图片切换实例 -->
    <div id="app">
        <img :src="isArr[index]">
        <button @click=‘up‘ v-show=‘index!=0‘>上一张</button>
        <button @click=‘down‘ v-show=‘index!=3‘>下一张</button>
    </div>
    <script>
        var app = new Vue({
            el:‘#app‘,
            data:{
                isArr:[
                    "./mario.jpg",
                    "./luiji.jpg",
                    "./blue.jpg",
                    "./pink.jpg"
                ],
                isShow1:false,
                isShow2:true,
                index:0
            },
            methods: {
                up:function(){
                        this.index--
                },
                down:function(){
                        this.index++
                }
            }
        })
    </script>

3`记事本

#<!-- 记事本实例 -->
   <div id="app">
        <section>
            <input type="text" v-model=‘inputValue‘ @keyup.enter=‘login1‘ placeholder="hello">
            <section v-show="list.length!=0">
                <ul>
                    <li v-for=‘(item,index) in list‘>
                        <div>
                            <span>{{index+1}}</span>
                            <label>{{item}}</label>
                            <button @click=‘dis(index)‘ >删除</button>
                        </div>
                    </li>
                </ul>
                <p>行数{{list.length}}</p>
            <div>
                <button @click=‘err‘>清空</button>
            </div>
            </section>
            
        </section>
    </div>
    <script>
        var app = new Vue({
            el:‘#app‘,
            data:{
                list:[‘吃饭‘,‘睡觉‘],
                inputValue:‘‘,
                isIf:true,
            },
            methods: {
                dis:function(index){
                    this.list.splice(index,1)
                },
                login1:function(){
                    this.list.push(this.inputValue);
                    this.inputValue = ‘‘
                },
                err:function(){
                    this.list = []
                }
            }
        })
    </script>

7`axios

#axiosjs包导入
#<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

1`GET方法

#
document.querySelector(‘.get‘).onclick = function (){
            axios.get(‘https://autumnfish.cn/api/joke/list?num=3‘).then(function(response){
                console.log(response)
            },function(err){
                console.log(err)
            })
        }//问号后接参数

2`POST方法

# 
document.querySelector(‘.post‘).onclick = function() {
            axios.post(‘https://autumnfish.cn/api/user/reg‘,{username:‘jack‘}).then(function(response){
                console.log(response)
            },function(err){
                console.log(err)
            })
        }

8`axios+vue

<!-- axios+vue案例 -->
   <div id="app">
        <input type="button" value="获取笑话" @click=‘getJoke‘>
        <p>{{joke}}</p>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var app = new Vue({
            el:‘#app‘,
            data:{
                joke:‘这是一个笑话‘
            },
            methods: {
                getJoke:function(){
                    var that = this;
                    axios.get(‘https://autumnfish.cn/api/joke/‘).then(function (response) {
                        console.log(response.data)
                        that.joke = response.data;
                    })
                }
            }
        })
    </script>

1`天气查询案例

#<!-- 天知道案例(axios+vue) -->
    <div id="app">
        <div class="search_form">
            <div><h1>天知道</h1></div>
            <div class="form_group">
                <input type="text" @keyup.enter=‘search‘ v-model=‘city‘>
                <input type="button" value="查询" @click=‘search‘>
            </div>
            <a @click="inSearch(‘北京‘)">北京</a>
            <a @click="inSearch(‘上海‘)">上海</a>
            <a @click="inSearch(‘广州‘)">广州</a>
            <a @click="inSearch(‘深圳‘)">深圳</a>
        </div>
        <ul class="weather_list">
            <li v-for=‘item in weatherList‘>
                <div><span>{{item.date}}</span></div>
                <div><span>{{item.high}}</span></div>
                <div><span>{{item.low}}</span></div>
            </li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 

Vue.js

原文：https://www.cnblogs.com/foresthan/p/12990738.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！