美文网首页
3.Vue第三章

3.Vue第三章

作者: 西瓜炒苦瓜 | 来源:发表于2017-10-22 21:38 被阅读6次
1.vue模板渲染
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vuedemo</title>
  </head>
  <body>
    <div id="app" title="?">
        {{ hello }}
    </div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data () {
                    return {
                        hello: "world"
                    }
                }
        })；
    </script>
  </body>
</html>
注意：
1.title="{{ hello }}"
2.v:title="hello"
2.v-text和v-html区别：
1.v-text
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vuedemo</title>
  </head>
  <body>
    <div id="app" >
        <p v-text="hello"></p>
        <p v-html="hello"></p>
    </div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data () {
                    return {
                        hello: "world"
                    }
                }
        });
    </script>
  </body>
</html>

2.v-html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vuedemo</title>
  </head>
  <body>
    <div id="app" >
        <p v-text="hello"></p>
        <p v-html="hello"></p>
    </div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data () {
                    return {
                        hello: "<span>world</span>"
                    }
                }
        });
    </script>
  </body>
</html>
3.表达式
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vuedemo</title>
  </head>
  <body>
    <div id="app" >
        {{ status ? num+1 : num-1 }}
    </div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data () {
                    return {
                        num: 1,
                        status: false
                    }
                }
        });
    </script>
  </body>
</html>
4.列表渲染
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vuedemo</title>
  </head>
  <body>
    <div id="app" >
        <ul>
            <!--<li v-for="item in list" v-text="item.name + item.price">{{ item.name }}:{{ item.price }}</li>-->
                <!--<li v-for="(item,index) in list" :class="{odd: index % 2}">{{ index }}:{{ item.name }}:{{ item.price }}</li>-->
          <li v-for="(value,key) in objList">{{ key +":"+ value}}</li>
        </ul>
    </div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data () {
                    return {
                        list: [
                          {
                            name: 'apple',
                            price: 6
                          },
                          {
                            name: 'banana',
                            price: 2
                          }
                        ],
                        objList: {
                            name: 'apple',
                            price: 6,
                            color: 'red'
                        }
                    }
                }
        });
    </script>
  </body>
</html>
5.事件绑定
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vuedemo</title>
  </head>
  <body>
    <div id="app" >
        <ul>
          <li v-for="(item,index) in list">{{ item.name }}:{{ item.price }}</li>
        </ul>
        <button v-on:click="addItem" style="padding:10px">增加</button>
    </div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data () {
                    return {
                        list: [
                          {
                            name: 'apple',
                            price: 6
                          },
                          {
                            name: 'banana',
                            price: 2
                          }
                        ]
                    }
            },
            methods: {
                addItem() {
                    this.list.push({ name: 'dog', price: 200})
                }
            }
        });
    </script>
  </body>
</html>


1.set方法
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vuedemo</title>
  </head>
  <body>
    <div id="app" >
        <ul>
          <li v-for="(item,index) in list">{{ item.name }}:{{ item.price }}</li>
        </ul>
        <button v-on:click="addItem" style="padding:10px">增加</button>
    </div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data () {
                    return {
                        list: [
                          {
                            name: 'apple',
                            price: 6
                          },
                          {
                            name: 'banana',
                            price: 2
                          }
                        ]
                    }
            },
            methods: {
                addItem() {
                    Vue.set(this.list,1,{ name: 'dog', price: 200})
                }
            }
        });
    </script>
  </body>
</html>

总结：

1.png
6.指令
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vuedemo</title>
  </head>
  <body>
    <div id="app" >
         <!--<a v-bind:href="link"  v-bind:class="className" class="box" v-bind:title="link1">百度</a>-->
        <!--<a :class="[classA,classB]">百度</a>-->
        <a :class="[classA, {'A':has}]" :style="box">百度</a>
        <a v-if="has" v-on:click="toggle">toggle has</a>
        <a v-show="!has">has</a>
    </div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data () {
                    return {
                        link: 'http://www.baidu.com',
                        link1: '111',
                        red: 'red',
                        classA: 'red',
                            classB: 'green',
                            has: true,
                            box: {
                                'color':'red',
                                'font-size':'20px'
                            }
//                      className: {
//                          'green': true,
//                          'yeollw': false
//                      }
//                          className: ['green','yellow'],
                    }
            },
            methods: {
                toggle () {
                    this.has = !this.has
                }
            }
        });
    </script>
  </body>
</html>
7.事件绑定和表单
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vuedemo</title>
  </head>
  <body>
    <div id="app" >
         <button @click.stop="toggle"></button><!-阻止事件冒泡-->
       <input v-on:keydown.enter="onKeydown" value="11"><!-修改器-->
       <input v-model="myValue"  type="text"/>
       {{ myValue }}
       <br />
       <input v-model="myBox" type="checkbox" value="apple"/>
       <input v-model="myBox" type="checkbox" value="banana"/>
       <input v-model="myBox" type="checkbox" value="dog"/>
       {{ myBox }}
       <input v-model="myBox1a" type="radio" value="apple"/>
       <input v-model="myBox1a" type="radio" value="banana"/>
       <input v-model="myBox1a" type="radio" value="dog"/>
       {{ myBox1a }}
       <br />
       <select v-model="select">
           <option v-for="item in sele" :value="item.value">{{ item.text }}</option>
       </select>
       {{ select }}
    </div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data () {
                    return {
                        myValue: 'aaa',
                        myBox:[],
                        myBox1a: [],
                        select: null, 
                        sele: [
                           {"text": "APP","value":"0"},
                           {"text": "san","value":"1"},
                        ]
                    }
            },
            methods: {
                toggle () {
                    this.has = !this.has
                },
                onKeydown (){
                    console.log(this)
                }
            }
        });
    </script>
  </body>
</html>
2.png
8.计算属性
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vuedemo</title>
  </head>
  <body>
    <div id="app" >
         <input type="text" v-model="myValue" />
         {{ getMyValue() }}
    </div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data () {
                    return {
                        myValue: ''
                    }
            },
          computed: {
            myValueWithoutNum (){
                return this.myValue.replace(/\d/g, '');
            }
          },
          watch: {
            myValue: function(val, oldval){
                console.log(val,oldval);
            }
          },
          methods: {
            getMyValue () {
                return this.myValue.replace(/\d/g, '');
            }
          }
        });
    </script>
  </body>
</html>
3.png

相关文章

  • 3.Vue第三章

    1.vue模板渲染 2.v-text和v-html区别： 3.表达式 4.列表渲染 5.事件绑定 总结： 6.指令...

  • 3.vue指令

    {{ xxx }} 插值表达式 v-text（读取文本不能读取html标签）和v-html（能读取html标签） ...

  • vue笔记

    1.npm install vue 2.npm install vue-cli -g （全局） 3.vue ini...

  • Vue项目目录结构

    1.vue项目目录结构： 2.vue组件说明： 3.vue组件引用路径的问题

  • 17.vue中多个元素或者多个组件的过渡动画列表过渡

    1.多个元素过渡动画 2.多个组件的过渡动画 3.vue中的列表过渡

  • 3.vue模板语法

    vue模板语法 指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaSc...

  • 3.Vue crud案例

    效果：

  • 3.vue的组件

    import Vue from 'vue' 表示引入了vue这个库并赋值给了Vue; 类似require ...

  • 3.Vue 引入Axios

    1. axios安装 2.axios定义 在src目录下新建utils目录，新增http-util.js文件，定义...

  • 2018-09-16

    1.vue的购物车效果 2. vue做的选项卡 3.vue做的邮箱

网友评论

      本文标题：3.Vue第三章

      本文链接：https://www.haomeiwen.com/subject/eoqhuxtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|3.Vue第三章|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！