Vue实例

第一个vue实例：

使用VUE和jquery和js一样，都需要先导入VUE你可以去cnd上导入也可以下载到本地

<body>
    <div id="app">
        <p>name:{{ name }}</p>
        <p>age:{{ age }}</p>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <script>
        var app = new Vue({  //设置一个Vue的对象然后来进行操作
            el:'#app',   //  对标签id为app的进行操作
            data:{
                name:'老王',
                age:17
            }
        })
    </script>
</body>

还可以这样写：
把你要渲染的信息进行设置为一个字典

<script>
    var d = {
        name:'老赵',
        age:18
    }
    var app = new Vue({
        el:'#app',
        data:d,
    })
</script>

其实vue就相当于python的django的渲染进行设置渲染

v-html:

添加标签和内容：

<body>
<!---->

    <div id="app">
        <p v-html="message"></p>   <!--这个是吧你的标签页渲染到这里是添加标签和内容-->
        <p>
            {{kong.split('').reverse().join('')}}  <!--这个就好比你的python的字符串的 方法 先去空 然后翻转 然后再拼接-->
        </p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'<a href="https://www.baidu.com">点我</a>',
                kong:'坚强 坚强'
            }
        })
    </script>

message.split('').reverse().join(''):

对你的字体设置为翻转的这个就好比python的字符串的操作先去空然后翻转然后拼接

<body>
    <div id="app">
         <p >{{ message.split('').reverse().join('') }}</p>    <!--对你的 内容进行翻转-->
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app =new Vue({
            el:'#app',
            data:{
                message:'好看不 马上我到了页面上就是翻转了'
            }
        })
    </script>

效果显示：

结果就是翻转了

组合翻转：

    <div id="app">
        <p>{{ message }}</p>
        <button v-on:click="ni">逆转消息</button>

    </div>
    <!---->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'你好啊'
            },
            methods:{
                ni:function(){
                    this.message = this.message.split('').reverse().join('') //当点击的时候改变你的当前的message的消息
                }
            }
        })

    </script>

v-if 和v-show:

都是判断你的内容是不是正确之后显示的 if是显示 show是隐藏

if的表达式当你的判断不成立就把信息给去除而show是不正确的时候就隐藏

<body>
    <div id="app">
        <p v-if="ok">想要</p>   <!--当ok是正确的时候就显示出来-->
        <p v-show="ok">它想要</p>  <!--当ok是正确的时候就隐藏-->
    </div>
  <!---->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                ok:true
            }
        })
    </script>
</body>

效果：show是隐藏 if是去除：

v-bind 绑定元素:

绑定元素：

绑定一个url进行跳转

 <div id="app">
        <a v-bind:href="url">点我啊</a><!--绑定一个url进行跳转-->

    </div>

      <!---->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                url:'https://www.baidu.com'
            }
        })
    </script>

<div id="app">
    <span v-bind:title="message">点我啊</span><!--绑定一个悬浮就会显示现在时间的信息字符串-->
</div>
  <!---->
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            message:'页面加载于'+new Date().toLocaleString()
        }
    })
</script>

绑定事件：v-on：

绑定事件需要和methods：{}搭配来使用

绑定事件的操作在你的vue中和methods进行搭配

    <div id="app">
        <button v-on:click="ooxx">ooxx</button> <!--点击就会对你绑定的事件进行处理-->
    </div>
      <!---->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            methods:{  <!--绑定事件就需要用到methods-->
                ooxx:function(){  <!--对你绑定的事件进行执行回掉函数 -->
                    alert('ooxx')
                }
            }
        })
    </script>

效果就是你点击的时候会弹出一个alert的框

    <div id="app">
        <button  v-on:click="ooxx">111</button> 
        <form action="" v-on:submit.parent="onsubmit">  <!--设置为form中的submit提交的时候执行绑定事件-->
            <input type="text" name="name">
            <input type="submit" value="提交">
        </form>
    </div>

          <!---->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            methods:{
                ooxx:function(){
                    alert(111)
                },
                onsubmit:function(){
                    alert('不刷新界面')
                }
            }
        })
    </script>

方法属性：渲染的时候加括号执行的内容在methods内

方法的执行：需要在渲染的时候加上括号（）

  <div id="app">
        <p>{{ message }}</p>
        <button v-on:click="ni">逆转消息</button>
        <p>{{ reverseMessage() }}</p>   <!--方法的执行需要加上括号-->


        <p>{{ reverse_message_one }}</p>
    </div>
    <!---->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'你好啊'
            },
            methods:{
                ni:function(){
                    this.message = this.message.split('').reverse().join('') //当点击的时候改变你的当前的message的消息
                },
                reverseMessage:function(){    //返回的是方法

                    return this.message.split('').reverse().join('')
                }
            },

计算机属性是在conputed中：

       <p>{{ message }}</p>    
      <p>{{ reverse_message_one }}</p>




            computed:{ //这个是计算机的属性
                reverse_message_one:function(){
                    return this.message.split('').reverse().join('')
                }
            }

计算机属性和方法对比是每一次执行都会重新执行这个方法而属性是从缓存中获取除非你改变了你的数值你的计算机的属性才会重新执行

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="app">
        <p>{{ message }}</p>
        <button v-on:click="ni">逆转消息</button>
        <p>{{ reverseMessage() }}</p>   <!--方法的执行需要加上括号-->

        <p>{{ reverse_message_one }}</p>

         <p>{{ xing }}</p>
        <p>{{ ming }}</p>
        <p>{{ quanming }}</p>
        <p>{{ quan_one() }}</p>
    </div>
    <!---->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'你好啊',
                xing:'王',
                ming:'二'
            },
            methods:{
                ni:function(){
                    this.message = this.message.split('').reverse().join('') //当点击的时候改变你的当前的message的消息
                },
                reverseMessage:function(){    //返回的是方法

                    return this.message.split('').reverse().join('')
                },
                quan_one:function(){
                    return this.xing+this.ming
                }

            },
            computed:{ //这个是计算机的属性
                reverse_message_one:function(){
                    return this.message.split('').reverse().join('')
                },
                quanming:function(){
                    return this.xing+this.ming
                }
            }
        })

    </script>

</body>
</html>

属性和方法对比

侦听属性 watch

当你有一些数据需要随着其它数据变动而变动时 watch可以很好的进行侦测的改变

    <div id="app">
        <p>{{ xing }}</p>
        <p>{{ ming }}</p>
        <p>{{ quanming }}</p>

    </div>

    <!---->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                xing: '张',
                ming: '三',
                quanming:'张三'
            },
            watch:{
                xing:function(val){ //val  获取的是你的这个方法的值
                    this.quanming = val+this.ming   //当你的姓改变的时候你的全名页改变
                },
                ming:function(val){  //val  获取的是你的这个方法的值
                    this.quanming = val + this.xing
                }
            }
        })
    </script>

Class 与 Style 绑定

上面我们介绍了v-bind的绑定但是那种绑定直接就把信息绑定死了，太死板了所以我们可以灵活的绑定

<div v-bind:class="{ active: isActive }"></div>
这个意思是当你额isActive是Trus的时候就给你的div添加一个active的class

 <div id="app">
        <div class="c" v-bind:class="{c1:ok}" v-on:click="active"></div> <!--当你的ok是True的时候就添加一个c1的class-->
    </div>

    <!---->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                ok:false
            },
            methods:{
                active:function(){
                    this.ok = !this.ok   // ! 是把你的值取反向的
                }
            }
        })
    </script>

可以灵活的改变你的样式：

生成一个变色的圆：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .c {
            height: 200px;
            width: 200px;
            border-radius: 50%;
            background-color: red;
        }
        .c1 {
            background-color: green;
        }
    </style>
</head>
<body>


    <div id="app">
        <div class="c" v-bind:class="{c1:ok}" v-on:click="active"></div> <!--当你的ok是True的时候就添加一个c1的class-->
    </div>

    <!---->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                ok:false
            },
            methods:{
                active:function(){
                    this.ok = !this.ok   // ! 是把你的值取反向的
                }
            }
        })
    </script>

</body>
</html>

变色圆

循环判断：v-if ,v-for

v-if: 其实就是vue的if判断如果是True语句就执行

<body>

    <div id="app">
        <template v-if="ok"> <!--如果ok是True的时候就显示出来-->
            <p>11111</p>
            <p>2222222222</p>
            <p>333333333</p>
        </template>
    </div>
     <!---->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                ok:true
            }
        })
    </script>

</body>

v-if 还有v-else语句呢

  <p v-else>444444444444</p><!--如果ok是false的时候就显示出来-->

v-for: 就是vue的for循环语句

v-for:

使用for循环的时候要注意你的下标的获取需要跟着内容后面

    <div>
            <ul>
                <li v-for = "(item,index) in list">  <!--内容后面跟着下标  下标要跟在内容后面-->
                    {{ index }}:{{ item }}
                </li>
            </ul>
        </div>
    </div>

          <!---->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                list:[   <!--获取的时候要用列表把你的内容装起来-->
                     '你好',
                    '我好',
                    '大家好'
                ]

v-for渲染内容的时候你的列表的渲染是根据位置来渲染，字典是根据下标来渲染

   <div id="app">
        <template v-if="ok"> <!--如果ok是True的时候就显示出来-->
            <p>11111</p>
            <p>2222222222</p>
            <p>333333333</p>
        </template>
        <p v-else>444444444444</p><!--如果ok是false的时候就显示出来-->

        <hr>
        <ul>
            <li v-for="(item,index) in list_one">{{ index }}:{{ item }}</li>   <!--列表是根据位置获取内容-->
        </ul>

        <hr>
        <ol>
            <li v-for="(v,k,index) in list_two">{{ index }}:{{ k }}:{{ v }}</li>  <!--字典是根据下标来获取内容的-->
        </ol>
    </div>
     <!---->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                ok:true,
                list_one:[
                    '吃饭',
                    '睡觉',
                    'papapa'
                ],
                list_two:{
                    'name':'老王',
                    'age':17
                }
            }
        })
    </script>

表单输入绑定 v-model

你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

其实v-model就是一个双向绑定的当你在其中的一个输入的时候另外一个就可以显示出你输入的结果：

只要你渲染的内容和你的v-model一样那么你的这个渲染的就会随着v-models而改变

<body>

    <div id="app">

        <input type="text" v-model="message">  <!--当你在这里输入的时候你的下面的会显示-->
        <span>{{ message }}</span>  <!--这里显示的是和你上面的v-model内设置一样-->
    </div>
    
    <!---->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'' //初始值先设置为空
            },
        })
    </script>

</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    <input type="text" v-model="message">  <!--当你在这里输入的时候你的下面的会显示-->
    <span>{{ message }}</span>  <!--这里显示的是和你上面的v-model内设置一样-->




        <div id='example-3'>
        <input type="checkbox" id="jack" value="basketball" v-model="hobby">
        <label for="jack">篮球</label>

        <input type="checkbox" id="john" value="football" v-model="hobby">
        <label for="john">足球</label>

        <input type="checkbox" id="mike" value="doublecolorball" v-model="hobby">
        <label for="mike">双色球</label>
        <br>

        <span>我的爱好: {{ hobby }}</span>  <!--把你的选择的内容显示在这里-->
    </div>
</div>

<!---->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '', //初始值先设置为空
            hobby: [ ]
        },
    })
</script>

</body>
</html>

v-midel

官方文档最齐全：https://cn.vuejs.org/v2/guide/

posted @ 2018-07-24 17:56 可爱的红领巾阅读(253) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

可爱的红领巾