Vue.js语法使用

最新推荐文章于 2024-06-12 08:41:10 发布

黑色幽默ma

最新推荐文章于 2024-06-12 08:41:10 发布

阅读量149

点赞数

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

本文链接：https://blog.csdn.net/weixin_42412462/article/details/81212184

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

什么是 Vue？
我们要把一个 json对象的数据，显示到一个元素上去。
如果不使用 Vue, 那么就会用到 JS 或者 JQuery，通过操作 HTML DOM 的方式，把数据显示上去。
如果使用Vue, 那么仅仅需要提供数据，以及数据要绑定到的元素的id,就行了,不需要显式地操作HTML DOM。

默认展示内容就用：{{内容}}。

简单使用：

<div id="div1">
   
  {{gareen.name}}
 
</div> 
<script>  
//json准备数据
var gareen = {"name":"盖伦","hp":616};
//通过vue.js 把数据和对应的视图关联起来
new Vue({
      el: '#div1',//对应的控件
      data: {
        message: gareen
      }
    })
</script>

监听事件：

 <div id="div1">
  
  <div>一共点击了  {{clickNumber}}次</div> 
   <button v-on:click="count">点击</button> 
   <button @click="count">点击2</button>
  </div>
<script>
   
new Vue({
      el: '#div1',
      data: {
          clickNumber:0
      },
      methods:{
          count: function(){
              this.clickNumber++;
          }
      }
    })
</script>

事件修饰符：.stop .prevent .capture .self .once

在me上的click后面加一个 .stop，那么冒泡到了这里就结束了，就不会冒到father上面去了。
<div id="me" v-on:click.stop="doc">

在father 上增加一个.capture
<div id="father" v-on:click.capture="doc">
那么当冒泡发生的时候，就会优先让father捕捉事件

<div id="father" v-on:click.self="doc">
这样点击son 和 me都不会导致其触发click事件，只有点击father自己，才会导致事件发生

<div id="father" v-on:click.once="doc">
这样father点击一次之后，就不会再监听到click了，但是，grandFather还能监听到

@click.prevent="jump"、@click.prevent 可以阻止页面刷新。。只有超链和form这种会导致页面刷新的操作，.prevent 才有用。普通的不导致页面刷新的按钮，加上这个没有任何变化

v-for循环遍历，第一种不带下标，第二种带有下标

<div id="div3">
    <table align="center">
        <tr class="firstLine">
            <td>index</td>
            <td>name</td>
            <td>hp</td>
        </tr>

        <tr v-for="person,index in persons">
            <td>{{index+1}}</td>
            <td>{{person.name}}</td>
            <td>{{person.hp}}</td>
        </tr>

    </table>
</div>

var data = [
        {name: "盖伦", hp: 341},
        {name: "提莫", hp: 225},
        {name: "安妮", hp: 427},
        {name: "死歌", hp: 893}
    ];
    new Vue({
        el: '#div3',
        data: {
            persons: data
        }
    })

纯数字遍历：

<div id="div1">
    <div v-for="i in 10">
     {{ i }}
    </div>
</div>
    
<script>
  
new Vue({
      el: '#div1'
    })
    
</script>

过滤器

<td align="center">
                <input v-model= "dat"  />
            </td>
            <td align="center">
                {{ dat|filter1}}
            </td>
<script type="text/javascript">
 new Vue({
      el: '#div1',
      data: {
          dat:''
      },
      filters:{
          filter1:function(value) {
                if (!value) return '' //如果为空，则返回空字符串
                value = value.toString()
                return value.charAt(0).toUpperCase() + value.substring(1)
          }
      }
    })
</script>

全局过滤器

Vue.filter('capitalize', function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
})
     
Vue.filter('capitalizeLastLetter', function (value) {
    if (!value) return '' //如果为空，则返回空字符串
    value = value.toString()
    return value.substring(0,value.length-1)+ value.charAt(value.length-1).toUpperCase()
})

if----else

<div id="div2">
    <button @click="moyiba">摸一把试运气</button>
    <div v-if="show">中奖</div>
    <div v-else>没有中</div>
</div>

new Vue({
        el: '#div2',
        data: {
            show: false
        },
        methods: {
            moyiba: function () {
                this.show = Math.random() < 0.1
            }
        }
    })

v-bind绑定

<div id="div4">
    <a v-bind:href="pages">http://www.baidu.com</a>
    <p v-bind:style="styles">百度</p>
</div>

new Vue({
        el: '#div4',
        data: {
            pages: 'http://www.baidu.com',
            styles: 'font-size: 20px'
        }
    })

v-model双向绑定

<div id="div5">
    名称:<input v-model="myname">
    <button @click="dianji">提交</button>
</div>

new Vue({
        el: '#div5',
        data: {
            myname: ''
        },
        methods: {
            dianji: function () {
                alert(this.myname);
            }
        }
    })

<div id="div5">
    名称:<input v-model="myname">
    <button @click="dianji">提交</button>
</div>
<div id="div6">
    <table align="center">
        <tr class="firstLine">
            <td>视图类型</td>
            <td>输入数据</td>
            <td>绑定到Vue上的数值</td>
        </tr>
        <tr>
            <td>
                单行文本
            </td>
            <td>
                <input v-model.lazy.trim="inputs" placeholder="输入数据">
            </td>
            <td>
                <p>{{ inputs }}</p>
            </td>
        </tr>
        <tr>
            <td>
                多行文本
            </td>
            <td>
                <textarea v-model="textareass" placeholder="输入数据"></textarea>
            </td>
            <td>
                <p>{{ textareass }}</p>
            </td>
        </tr>
        <tr>
            <td>
                单个复选框
            </td>
            <td>
                <input type="checkbox" id="checkbox" v-model="checked">
            </td>
            <td>
                <p>{{ checked }}</p>
            </td>
        </tr>
        <tr>
            <td>
                多个复选框
            </td>
            <td>
                <input type="checkbox" id="teemo" value="teemo" v-model="checkedes">
                <label for="teemo">teemo</label>
                <input type="checkbox" id="gareen" value="gareen" v-model="checkedes">
                <label for="gareen">gareen</label>
                <input type="checkbox" id="annie" value="annie" v-model="checkedes">
                <label for="annie">annie</label>
            </td>
            <td>
                <p>{{ checkedes }}</p>
            </td>
        </tr>
        <tr>
            <td>
                单选按钮
            </td>
            <td>
                <input type="radio" id="one" value="One" v-model="radios">
                <label for="one">One</label>
                <br>
                <input type="radio" id="two" value="Two" v-model="radios">
                <label for="two">Two</label>
            </td>
            <td>
                <p>{{ radios }}</p>
            </td>
        </tr>
        <tr>
            <td>
                单选选择框
            </td>
            <td>
                <select v-model="selecteds" size="5">
                    <option disabled value="">请选择</option>
                    <option>AD</option>
                    <option>AC</option>
                    <option>ADC</option>
                </select>
            </td>
            <td>
                <p>{{ selecteds }}</p>
            </td>
        </tr>
        <tr>
            <td>
                多选选择框
            </td>
            <td>
                (通过ctrl或者shift进行多选)<br>
                <select v-model="selecteds" multiple size="5">
                    <option disabled value="">请选择</option>
                    <option>AD</option>
                    <option>AC</option>
                    <option>ADC</option>
                </select>
            </td>
            <td>
                <p>{{ selecteds }}</p>
            </td>
        </tr>
        <tr>
            <td>
                单个复选框
            </td>
            <td>
                默认值是true或者false,也可以修改为自定义的值<br>
                <input type="checkbox" id="toggle" true-value="yes" false-value="no" v-model="toggle">
            </td>
            <td>
                <p>{{ toggle }}</p>
            </td>
        </tr>

    </table>
</div>




new Vue({
        el: '#div6',
        data: {
            inputs: '',
            textareass: '',
            checked: false,
            checkedes: [],
            radios: '',
            selected: '',
            selecteds: [],
            toggle: '',
        }
    })

组件：

<div id="div9">
    <mzj></mzj>
    <mzj></mzj>
    <mzj></mzj>
</div>


new Vue({
        el: '#div9',
        components: {
            'mzj': {
                template: '<div class="mzj">MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮</div>'
            }
        }
    })

黑色幽默ma

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js语法使用

什么是 Vue？我们要把一个 json对象的数据，显示到一个元素上去。如果不使用 Vue, 那么就会用到 JS 或者 JQuery，通过操作 HTML DOM 的方式，把数据显示上去。如果使用Vue, 那么仅仅需要提供数据，以及数据要绑定到的元素的id,就行了,不需要显式地操作HTML DOM。简单使用：<div id="div1"> {{gareen.n...
复制链接

扫一扫

专栏目录