vue 打造携程网平台界面实战

最新推荐文章于 2024-04-11 09:59:05 发布

weixin_33782386

最新推荐文章于 2024-04-11 09:59:05 发布

阅读量530

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/fgxwan/p/9943245.html

版权

在实战之前先看一下基本语法：

第一个例子：

输出 heoo

<script src="./vue.js"></script>
<body>
<div id ="app">{{a}}</div>

</body>
<script >
  var app = new Vue({     //v字母大写
    el: '#app',
    data :{
      a: 'heoo'
    }
  })
原生写法是：

var dom  = document.getElementById("app").innerHTML("heoo")

例二  动态间隔打印输出

原生写法是：

var dom  = document.getElementById('app');
setTimeout(function(){
  dom.innerHTML=("bye world")

},1000)

vue写法是：

<div id ="app">{{content}}</div>

</body>
<script >
  var app = new Vue({
    el: '#app',
 data :{
content: 'heoo'
    }
  })
  setTimeout(function(){
    app.$data.content = "hello"
  },1000)


以下示例一下双向通信案例：

<script src="./vue.js"></script>
<body>
<div id ="app">
  <input type="text" v-model="inputValue"/>
  <button v-on:click="handleBtnClick">提交</button>
  <ul>
    <li v-for="item in list">{{item}}</li>
  </ul>
</div>
</body>
<script >
  var app  = new Vue({
    el:'#app',
    data:{
      list:[],
      inputValue:''
    },
    methods:{
      handleBtnClick:function () {
        alert(this.inputValue)

      }
    }
  })
</script>
</html>    //程序运行后安f12  调试 输入  app.$data.inputValue    凋试是否双向通信。

绑定后输入框输什么就增加什么，只要加一句，  this.list.push(this.inputValue)

<script >
  var app  = new Vue({
    el:'#app',
    data:{
      list:[],
      inputValue:''
    },
    methods:{
      handleBtnClick:function () {
 this.list.push(this.inputValue)
      }
    }
  })
</script>

最后一步需要清空输入框内容：在函数中增加：this.inputValue = ""

methods:{
  handleBtnClick:function () {
    this.list.push(this.inputValue)
    this.inputValue = ""
  }
}
通过组件实现上面的案例：全局组件和局部组件实现例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
    <script src = "node_modules/vue/dist/vue.js"></script>
</head>
<body>

<div id = "root">
    <div>
        <input type="text" v-model="inputValue"/>
        <button @click = "handleBtnCkuck">提交</button>
    </div>
    <ul>        
        <todo-item v-bind:content = "item" v-for = "item in list"></todo-item>
    </ul>
</div>
<script>
    Vue.component("TodoItem",{
        props:['content'],
        template:"<li>{{this.content}}</li>"
    })
    var app = new Vue({
        el:"#root",
        data:{
            list:[],
            inputValue:"",
        },
        methods:{
            handleBtnCkuck:function(){
                this.list.push(this.inputValue),
                this.inputValue=''
            }
        }
    })

</script>
<script scr="./node_modules/axios/dist/axios.js"></script>
<script src = "./node_modules/vue/dist/vue.js"></script>
</body>
</html>

全局组件实现totolist完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
    <script src = "node_modules/vue/dist/vue.js"></script>
</head>
<body>

<div id = "root">
    <div>
        <input type="text" v-model="inputValue"/>
        <button @click = "handleBtnCkuck">提交</button>
    </div>
    <ul>
        <!--<li v-for="item in list">{{item}}</li>-->
        <todo-item v-bind:content = "item" v-for = "item in list"></todo-item>


    </ul>
<!--</div>-->
<script>
  //  全局组件实现
    // Vue.component("TodoItem",{
    //     props:['content'],
    //     template:"<li>{{this.content}}</li>"
    // })
  var TodoItem ={
      props:['content'],
      template:"<li>{{content}}</li>"
  }

    var app = new Vue({
        el:"#root",
        components:{
            TodoItem:TodoItem
        },
        data:{
            list:[],
            inputValue:"",
        },
        methods:{
            handleBtnCkuck:function(){
                this.list.push(this.inputValue),
                this.inputValue=''
            }
        }
    })



</script>
<script scr="./node_modules/axios/dist/axios.js"></script>
<script src = "./node_modules/vue/dist/vue.js"></script>
</body>
</html>

局部组件简易例子完整代码：

发送事件，父组件处理例子，结总第一步先在模板中绑定事件，

template:"<li @click='handleItemClick'>{{content}}</li>",
第二步，子组件中注册事件，并发送件事件

methods:{
    handleItemClick:function () {
         this.$emit("delete",this.index);
     }
}
第三步：在视图组件接收事件，并在全局注册组件

@delete="handleItemDelete">
——————————————————————————————————————————————————

components:{
    TodoItem:TodoItem
},
——————————————————————————————————————————————————————————————————
最后在全局组件中写好处理子组件发来的逻辑：

handleItemDelete:function(index){
    this.list.splice(index,1)
}
以下是完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
    <script src = "node_modules/vue/dist/vue.js"></script>
</head>
<body>

<div id = "root">
    <div>
        <input type="text" v-model="inputValue"/>
        <button @click = "handleBtnClick">提交</button>
    </div>
    <ul>
        <todo-item v-bind:content = "item"
                   v-bind:index="index"
                   v-for="(item,index) in list"
                   @delete="handleItemDelete">
        </todo-item>
    </ul>
</div>
<script>
   var TodoItem={
        props:['content','index'],
        template:"<li @click='handleItemClick'>{{content}}</li>",
       methods:{
           handleItemClick:function () {
                this.$emit("delete",this.index);
            }
       }
    }
    var app = new Vue({
        el:"#root",
        components:{
            TodoItem:TodoItem
        },
        data:{
            list:[],
            inputValue:"",
        },
        methods:{
            handleBtnClick:function(){
                this.list.push(this.inputValue)
                this.inputValue=''
            },
            handleItemDelete:function(index){
                this.list.splice(index,1)
            }
        }
    })

</script>
<script scr="./node_modules/axios/dist/axios.js"></script>
<script src = "./node_modules/vue/dist/vue.js"></script>
</body>
</html>

View Code

调试实例：


生命周期。vue在执行过程中，要经过加载代码，初始函数，加载数据，初始化完成。等等生命周期，我们可以在这些周期内加入外理我们的业务。比如，在vue初始化时弹出你好，或者初始化时初始自定义数值：
，比如，我们先在 初始化时打印hello world:

<div id = "add">hello world</div>

beforeCreate:function(){
　　　　console.log("hello world") //初始化
},
created:function(){
　　console.log("初始化完成，模坂，无素后");

}，
beforeMount:function(){
   console.log("初台化数据")
},
mounted:function(){
　　console.log("渲染数据")
}
这儿简要的生命周期，。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

模板语法：


最简单的模板 {{}}  差值表达式    //也可以写表达式  例： {{a +6}}
           v-text="name"     //对应  name:"Dell"
　　　　　　　v-html = "name"　//name:"Dell" ||  <h1>Dekk</h1>  能识别标签样式
在差值表达式中，可以加两个变量加起来，但是为了不要在模板中套较多的罗辑，vue提供了计算属性，简化代码！

计算属性，方法，侦听器 computed,

computed:{
　　foo:function(){
　　　　return this.xxx+this.zzzzz
}
}//  
然后将计算属性的值放在{{中}}，计算属性内置缓存。当他依赖的属性没有改变时，他每次都会调上次计算好的值，不支持异步
当调用this.xxx = "xxxxx".改变了原属时在才会重新计算
计算属性拥有二个原生自带属性  get,  set  当设置和读取这个计算属性时会自动启用
computed:{
　　fullName:{
　　get:function(){
　　　　return this.firstName+""+this.lastName　　　　
},
　　　set:function(value){
           console.log(value);
  }
}
}

动态绑定样式，第一步首先要设置class = 一个变量，条件真成立，然后在自己身上绑定一个事件，点数件时接条件取反给自己,完整示例没有含Css文件，但是调试中正常切换

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <script src ="./node_modules/vue/dist/vue.js" ></script>
10 <script src = "./node_modules/axios/dist/axios.js"></script>
11 
12 
13 <div id="app">
14     <div  @click="handleDivClick"
15           :class="{activated:isActivated}">0000000</div>
16 </div>
17 <script>
18     var vm = new Vue({
19         el:"#app",
20         data:{
21             isActivated:false
22         },
23         methods:{
24             handleDivClick:function(){
25                 this.isActivated = !this.isActivated;
26             }
27         }
28     })
29 </script>
30 
31 </body>
32 </html>

动态切换Css

转载于:https://www.cnblogs.com/fgxwan/p/9943245.html

weixin_33782386

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 打造携程网平台界面实战

在实战之前先看一下基本语法：第一个例子：输出 heoo<script src="./vue.js"></script><body><div id ="app">{{a}}</div></body><script > var app = new Vue({ //v字母大写 el: '#ap...
复制链接

扫一扫