美文网首页
vue基础 一

vue基础 一

作者: Captain_xu | 来源:发表于2017-04-11 17:27 被阅读0次

    一切都建立在vue-cli 2.2 的脚手架工具里实现

    文本

    数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：
    Mustache 标签将会被替代为对应数据对象上 world 属性的值 ,而且一直会监听world的值，一但改变会跟着改变

    <template>
    <div>
        <p>hello {{world}}</p>
        <p v-text="'hello ' + world"></p>
        <p>{{`hello ${world}`}}</p>
        <p v-text="`hello ${world}`"></p>
        <button @click="world='ziksang'">改变wrold值</button>
     </div>
</template>

<script>
export default {
     data () {
         return {
              world : "world"
         }
     }
}
</script>
    • 第一种“Mustache” 语法（双大括号）写法
    • 第二种 用v-text的指今写法
    • 第三种和第四是对es6写法的拓展写法，称模板字符串

    v-once

    一般是用在组件树中传递时，导致组件数据一层一层传递时，变改了不需要改变的场景，用v-once可以避免在组件数中只需用一次性赋值操作

    <template>
    <div>
        <p v-once>hello {{world}}</p>
        <button @click="world='ziksang'">改变wrold值</button>
     </div>
</template>

<script>
export default {
     data () {
         return {
              world : "world"
         }
     }
}
</script>

    纯文本

    当我们在跟前后台对接口数据时，后台会返回一个html格式，一般是后台操作界面编译的样式文本，此时我们就要用v-html来进行解析

    <template>
    <div>
        <p v-html='html'></p>
     </div>
</template>

<script>

export default {
     data () {
         return {
              html : `<span style='color : red;'>显示红色的字你就解析成功了</span>`
         }
     }
}
</script>

    属性

    在组件中传递时需要用,其它元素上的绑定属性都需要这个功能

    <template>
    <div>
        <a :href='href'>href</a>
        <p :id='id'>id</p>
        ![](src)
        <button :disabled = 'disabled'>按钮</button>
     </div>
</template>

<script>

export default {
     data () {
         return {
              id : 2,
              href : 'http://www.baidu.com',
              src : 'https://cn.vuejs.org/images/logo.png',
              disabled : true
         }
     }
}
</script>

    不用：来绑定的属性可以直接属性赋值，如果一定要通过data数据选项中返回的值一定要加 ：

    使用javascript表达式

    在业务场景中一些方法判断或者简单的过滤，那我们可以用javascript表达式，能让代码更简洁，更清晰，比方说用一个三元表达式 。。。

    <template>
     <div>
        <div id="method1">
            <p>{{ count < 0 ? '+' : '-'}} {{count + 1}}</p>
            <button @click='count ++'>增加</button>
            <button @click='count --'>减少</button>
        </div>
        <div id="method2">
            <input type="text" v-model='message'>
            <h1>{{ message.split('').reverse().join('') }}</h1>
        </div>
     </div>
</template>

<script>
export default {
     data () {
         return {
              count : 0,
              message : ""
         }
     }
}
</script>

    这是语句，不是表达式
    {{ var a = 1 }}
    流控制也不会生效，请使用三元表达式
    {{ if (ok) { return message } }}

    修饰赋

    对于一些特殊的指令操作时需要，比方说对组件加事件，组织元素的默认行为，组织冒泡。。等等一系列，官方文档有详细解说每一个修饰赋的具体用途

    首我们先对components文件夹中创建一个myButton组件

    <template>
    <button>按钮</button>
</template>

<script>
export default {

}
</script>

    再在app.vue中写入

    <template>
     <div>
         <my-button @click.native="buttonClick"></my-button>
     </div>
</template>

<script>
import myButton from './components/myButton.vue'
export default {
     components : {
         myButton
     },
     methods : {
         buttonClick () {
             alert("原生点击")
         }
     }
}

</script>

    正常的情况在一个单个组件内部自己使用v-on的事件，ok都不会有问题，如果在一个组件上定义一个指令事件，必须要用.native，这里大家一定要注意

    ** 我们用jquery的时候经常会遇到这种场景，当我们一个layer层弹出来的时候，内部是一个超过整个屏幕长度的滚动，当我们滑动layer的时候会导致里面的滚动也会一起滚动起来，这个是一件很操蛋的事，在网上也有着很多相关解决的办法，vue可以通过修饰符来解决这个问题
    index.html文件中加一个视口度适配，更好的来查看效果 **

     <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

    app.vue文件中

    <template>
     <div>
         <ul>
             <li v-for="item in list">
                 <h1>{{item}}</h1>
             </li>
         </ul>
         <div @touchmove.prevent class="layer"></div>
     </div>
</template>

<script>
import myButton from './components/myButton.vue'
export default {
     data () {
         return {
             list : [1,2,3,4,5,6,7,8,9,10]
         }
     }
}

</script>

<style>
body,html {width:100%;height:100%}
h1{margin-top:10rem;}
.layer{width:100%;height:100%;position:fixed;top:0;left:0;z-index:99;background:rgba(0,0,0,.5)}
</style>

    我们会发当我们滑动layer层的，里面的滚动不会再滚动了，我们再试着把.prevent给去掉，会发现滚动再次出现，这个原理就是event.preventDefault来阻止默认事件事执行的

    我们对layer层把它的touchmove滑动事件给干掉了，就不会触发滚动区域的滑动事件，个人认为这个场景每个项目都会用的到

    简单的例子

    <template>
     <div>
        <input type="text" v-model.trim="content">
        <input type="text" v-model = 'content'>
     </div>
</template>

<script>
export default {
     data () {
         return {
             content : ""
         }
     }
}
</script>

    过滤器

    过滤器可以用在两个地方：mustache 插值和 v-bind 表达式

    过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示

    在v-bind中也就是2.10的时候才支持这个功能

    首先我们从后台拿到10个用户的手机，但是要把前7位掩码，做成*，然判断如果手机尾数是偶数的话，我们就显示已中奖，不是的话显示谢谢参与

    <template>
     <div>
         <p v-for='tel in telephone'>{{tel | newtel}}</p>
     </div>
</template>

<script>
export default {
     data () {
         return {
             telephone : [
                 10000000000,
                 10000000001,
                 10000000002,
                 10000000003,
                 10000000004,
                 10000000005,
                 10000000006,
                 10000000007,
                 10000000008,
                 10000000009,
                 10000000000,
             ]
         }
     },
     filters : {
         newtel (value) {
             if(!value) return ''
             value = value.toString().substr(7,4)
             value = '*'.repeat(7)+value
             let endMember = value.substr(-1,1)
             if(endMember % 2){
                 value = value+'中奖'
             }else{
                 value = value+'谢谢参与'
             }
             return value
         }
     }
}
</script>

    在filters选项里有个newtel的函数，value则是函数中固定的一个参数，代码过滤前的值，但最后在管道符里我们不用把这个固定的参数写在调用里面

    es6新特性，repeat这个方法

    结合过滤器参数与v-bind过滤

    当后台传给很多链接的地址的时候，每个链接要带上不同的参数，比如https//www.baidu.com?user=ziksang&age=20

    <template>
     <div>
         <a v-for='(url,index) in urlList' :href='url.url | getquery(url.name,url.age)'>{{url.url}}</a>
     </div>
</template>

<script>
export default {
     data () {
         return {
             urlList : [
                 {url : 'http://www.baidu.com',name :'ziksang',age : 20},
                 {url : 'http://www.google.com',name :'ziksang2',age : 30}
             ]
         }
     },
     filters : {
         getquery (value,name,age) {
             if(!value) return ""
             return `${value}?name=${name}&age=${age}`
         }
     }
}
</script>

    在v-bind管道符中的getquery(第一个参,第二个参)
    第一个参就是传给fitler里getquery里的第二个参数，就是name
    第二个参就是传给fitler里getquery里的第三个参数，就是age
    因为第一个参数是默认的

    缩写

    <!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

    <!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

    相关文章

      网友评论

          本文标题：vue基础 一

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

          延伸阅读

          深度阅读

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

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|vue基础 一|投稿指南|网站地图|RSS订阅|排版工具|手机版

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

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

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

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

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