我的VUE

最新推荐文章于 2023-06-05 16:07:48 发布

好运连连炜   

最新推荐文章于 2023-06-05 16:07:48 发布

阅读量117

点赞数

分类专栏：前端文章标签： vue

原文链接：https://www.bilibili.com/video/av27969216/?p=10

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我的vue开始历程

学习vue的mvvm，v-cloak，

app.js
负责项目的入口，，一切的请求入口，都要先经过这里，故需要路由分发，则调用router.js的路由分发处理
router.js
只负责路由分发，不负责业务逻辑，职能单一
controller
负责业务逻辑，不负责数据处理的CRUD，则需要用到model层
model
只操作数据库，执行sql语句，进行数据的crud
c：creat；r：read；u:update；d：delete
v-html
渲染html内容，并替换body里面的v-html便签的内容

v-text
渲染text内容，并替换body里面的v-text便签的内容

v-bind
绑定数据后，以js表达式执行，快捷方式：。

跑马灯

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8" />
    <title>跑马灯</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<body>

    <div id="app">
        <button @click='show' value="浪起来">浪起来</button>
        <button value="低调" @click="stop">低调</button>
        <p>{{meg}}</p>



    </div>
</body>


<script>
    //跑马灯效果，
    //1.获取第一个字符，再获取后面的字符，最后拼接
    //需要用到substring（），截取，
    //直接使用es6函数，改变this指向() => {}
    //this指向能获取vue实例里面的data

    var ve = new Vue({
        el: '#app',
        data: {
            meg: "猥琐发育^_^，别浪~~",
            mytime:null

        },
        methods: {
            show(){
                //设置一个计时器，自己跑起来,使用箭头函数直接改变指向
                if(this.mytime !=null)return;
                //判断是否为空值，不然开始越跑越快
                this.mytime=setInterval(()=>{
                    var start = this.meg.substring(0,1);
                var end = this.meg.substring(1);
                //重新赋值给meg
                this.meg =end +start;
                },400);  
            },
            stop(){
                clearInterval(this.mytime);
                this.mytime = null;
            }

        
            }
        
    })

</script>

</html>

修饰符

.self只阻止自己的冒泡行为
.stop阻止以上冒泡的行为
.once只触发一次，例如a链接，第一次点击没反应，第二次点击跳转
.prevent阻止默认事件，例如a链接，点击不跳转
.capture添加事件监听的捕获方式

v-bind单向数据绑定
v-modle双向数据绑定
只能用在表单元素上面，常见input（radio，text，email，address），checkbox，select，textarea

 <div id="app2">
        <input type="text" v-model="n1">
        <select name="" v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="n2">
        <button @click="add">=</button>
        <input type="text" v-model="n3">
    </div>
var ve2 = new Vue({
        el:'#app2',
data:{
    n1:0,
    n2:0,
    n3:0,
    opt:"+"

},
methods:{
    add(){
        switch(this.opt){
            case '+':
            this.n3 = parseInt(this.n1)+parseInt(this.n2);
            break;
            case '-':
            this.n3 = parseInt(this.n1)-parseInt(this.n2);
            break;
            case '*':
            this.n3 = parseInt(this.n1)*parseInt(this.n2);
            break;
            case '/':
            this.n3 = parseInt(this.n1)/parseInt(this.n2);
            break;
        }
        //eval投机取巧模式，方法二，不建议使用
        var n4 = 'parseInt(this.n1)'+this.opt+ 'parseInt(this.n2)';
        this.n3=eval(n4);
    }

}
    })

class

使用v-bind绑定样式，在data里面设置

<p :style="[objwo,objwode]">这是一个帅气的p</p>
data:{
objwo:{'color':'red'},
objwode:{'color':'red'}

v-for

v-for=’(val,key,index) in 对象，数组，迭代数字，对象数组，’

key

绑定指定唯一的字符串或者数字，不然代码会错乱

v-if与v-show

v-if直接删除
v-show是display：none，隐藏掉

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8" />
    <title>品牌列表</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<body>

    <div id="app">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class="panel-body form-inline">
               <label >
                   id:
                   <input type="text" class="form-control" v-model="id">
               </label>
               <label >
                    name:
                    <input type="text" class="form-control" v-model="name">
                </label>
                <input type="button" value="添加" class="btn btn-primary" @click="show">

            </div>

        </div>
        <table class="table table-bordered table-hover table-striped">
            <thead>
                    <tr> 
                        <th>id</th>
                        <th>name</th>
                        <th>ctime</th>
                        <th>operation</th>

                    </tr>
            </thead>
            <tbody>
                    <tr v-for="item in list" :key='item.id'> 
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.ctime}}</td>
                        <td>
                            <a href="" @click.prevent='del(item.id)'>删除</a>
                        </td>
                    </tr>
            </tbody>

           
        </table>
        
    </div>
    
</body>


<script>
  

    var ve = new Vue({
        el: '#app',
        data: {
            id:'',
            name:'',
            list:[
                {id:1,name:"飞机",ctime:new Date()},
                {id:2,name:"大炮",ctime:new Date()}
            ]           
        },
        //1.先获取id，name，ctime的值
        //2.组织成一个对象
        //3.将新对象，放到data里面的list数组里面
        //4.注意vue，实现了双向数据绑定，每当修改data里面的数据，vue会自动监听，更新数据到html
        methods: {
            show(){
                var car = {id:this.id,name:this.name,ctime:new Date()};
                this.list.push(car);
                this.id=this.name='';
                
            },
            //1.先查找删除的索引值，使用findindex（回调函数）
            //2.根据索引，调用splice方法
           del(id){
              var index= this.list.findIndex(item=>{
                   if(item.id==id){
                       return true;
                   }           
               })
               this.list.splice(index,1)

           }




        }
    
    })

</script>

</html>

好运连连炜   

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的VUE

我的vue开始历程学习vue的mvvm，v-cloak，app.js负责项目的入口，，一切的请求入口，都要先经过这里，故需要路由分发，则调用router.js的路由分发处理router.js只负责路由分发，不负责业务逻辑，职能单一controller负责业务逻辑，不负责数据处理的CRUD，则需要用到model层model只操作数据库，执行sql语句，进行数据的crudc：cre...
复制链接

扫一扫