02、Vue模板语法

1.模板的理解:

动态的html页面
包含了一些JS语法代码
双大括号表达式
指令(以v-开头的自定义标签属性)

2.双大括号表达式

语法: {{exp}}
功能:向页面输出数据
可以调用对象的方法

3.指令一:强制数据绑定

功能:指定变化的属性值
完整写法:
v-bind:xxx='yyy' //yyy 会作为表达式解析执行
简洁写法:
:xXx= 'yyy'

4.指令二:绑定事件监听

功能:绑定指定事件名的回调函数
完整写法:
v-on:click='xxx'
简洁写法:
@click='xxx‘

下面是一个实例完整代码:

<body>
    <div id="app">
        <h2>1.双大括号表达式h2>
        <p>{{msg}}p>
        <p>{{msg.toUpperCase()}}p>
        <p v-text="msg">p>
        <p v-html="msg">p>
        

        <h2>2.指令一:强制数据绑定h2>
        <img src="imgUrl">
        <img v-bind:src="imgUrl">
        <img :src="imgUrl">

        <h2>3.指令二:绑定事件监听h2>
        <button v-on:click="test1">test1button>
        <button @click="test2(msg)">test2button>

    div>

    <script type="text/javascript" src="../js/vue.js">script>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                msg:'I Will Back!',
                imgUrl:'https://cn.vuejs.org/images/logo.png'
            },
            methods:{
                test1(){
                    alert('Welcome!')
                },
                test2(content){
                    alert(content)
                }
            }
        })
    script>
body>

效果图如下:
02、Vue模板语法_第1张图片
 在该实例中{{msg.toUpperCase()}}的作用是将msg中的内容全部显示为大写;

{{msg}}

作用相似,其属性均为textContent,而

的属性是innerHTML,不同的还有

是把msg中无论是标签还是文本的内容均显示为文本,而

是把文本显示为标签,所以在效果上图中会有个蓝色的链接内容。
 另外实例中用了methods,所以在这里说一下表达式:表达式可以是一个方法名,这些方法都写在vue实例的methods属性内,并且是函数的形式,有时候需要在函数内写的this指向的是当前vue实例本身,因此可以直接使用this.xxx的形式来访问或者修改数据。
 这次就先总结这些了,小白养成记ing~

你可能感兴趣的:(Vue入门-零基础进阶,vue,前端)