Vue.js_模板语法_认识和理解

最新推荐文章于 2022-07-12 17:47:07 发布

徐小硕

最新推荐文章于 2022-07-12 17:47:07 发布

阅读量517

点赞数 2

分类专栏：前端_Vue相关知识文章标签： vue.js javascript 前端 html5

本文链接：https://blog.csdn.net/qq_40601005/article/details/105973281

版权

前端_Vue相关知识专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue.js 模板语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue_模板语法</title>
        <script src="../vue/vue.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <style type="text/css">
        .app_3_class {
            background: #E4E4E4;
            color: #FF0000;
        }

        #app_6 a {
            font-size: 20px;
            /* 去除下划线 */
            text-decoration: none;

        }
    </style>
    <body>
        <!-- 数据绑定最常见的形式就是使用 {{}} (双大括号)的文本插值-->
        <div id="app_1">
            <p>{{message}}</p>
        </div>
        <!-- 使用v-html指令用于输入html代码 -->
        <div id="app_2">
            <div v-html="message"></div>
        </div>
        <!-- 属性 v-bind 
            HTML属性中的值应使用v-bind指令 
        -->
        <div id="app_3">
            <!-- label没有任何效果 但是点击文本就可以进行事件选择 -->
            <label for="label">修改颜色</label>
            <input type="checkbox" v-model="use" id="label" />
            <div v-bind:class="{'app_3_class':use}">v-bind:class指令 绑定div样式</div>
        </div>
        <!-- 表达式 
            vue.js都提供了完全的JavaScript表达式支持
        -->
        <div id="app_4">
            {{5+5}}<br>
            {{ok ? 'Yes':'No'}}<br>
            {{message.split('').reverse().join('')}}
            <div v-bind:id="'list-'+id">菜鸟教程</div>
        </div>
        <!-- 指令
            指令是带有v-前缀的特殊属性。指令用于在表达式的值改变时，将某些行为应用到DOM上
         -->
        <div id="app_5">
            <!-- 这里，v-if指令将根据表达式seen的值(true或false)来决定是否插入p元素-->
            <p v-if="seen">现在你看到我了</p>
        </div>
        <!-- 指令
            参数
            参数在指令之后以冒号指明
            使用v-bind指令被用来响应式的更新HTML属性
         -->
        <div id="app_6">
            <!-- pre标签 用于对空行和空格进行控制 保留原有的样式 -->
            <!-- 这里的href是参数，告知v-bind指令将该元素的href属性与表达式url的绑定 -->
            <pre>    <a v-bind:href="url">百度一下</a>    </pre>
        </div>
        <!-- 用户输入 
            双向数据绑定
            在input输入框中我们可以使用v-model指令来实现双向数据绑定
            v-model指令用来在input、select、textraea、checkbox、radio等表单控件元素上创建    双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
            按钮的事件我们可以使用v-on监听事件，并对用户的输入进行响应。
        -->
        <div id="app_7">
            <p>{{message}}</p>
            <input type="text" id="app_7_input" v-model="message" />
            <button v-on:click="reverseMessage" type="button">反转字符串</button>
        </div>
        <!-- 过滤器     
            vue.js允许你自定义过滤器，被用作一些常见的文本格式化。由“管道符”指示
            过滤器函数接受表达式的值作为第一个参数
            对输入的字符串第一个字母转为大写
        -->
        <div id="app_8">
            <p>把输入的首字母进行大写处理</p>
            <input type="text" v-model="message" />
            {{message | capitalize}}
        </div>
        <!-- script -->
        <script type="text/javascript">
            //app_1
            new Vue({
                el: '#app_1',
                data: {
                    message: 'Hello Vue.js!'
                }
            })
            //app_2
            new Vue({
                el: '#app_2',
                data: {
                    message: '<h2>使用v-html指令输入html代码</h2>'
                }
            })
            //app_3
            new Vue({
                el: '#app_3',
                data: {
                    use: false
                }
            })
            //app_4
            new Vue({
                el: '#app_4',
                data: {
                    ok: true,
                    message: '反转文本',
                    id: 1
                }
            })
            //app_5
            new Vue({
                el: '#app_5',
                data: {
                    seen: true
                }
            })
            //app_6
            new Vue({
                el: '#app_6',
                data: {
                    url: 'http://baidu.com'
                }
            })
            //app_7
            new Vue({
                el: '#app_7',
                data: {
                    message: 'v-model进行双向数据绑定'
                },
                methods:{
                    reverseMessage:function(){
                        this.message = this.message.split('').reverse().join('')
                    }
                }
            })
            //app_8
            new Vue({
                el:'#app_8',
                data:{
                    message:'abcd'
                },
                /* 过滤器 */
                filters:{
                    /* 对输入的字符串第一个字母进行大写处理 */
                    capitalize:function(value){
                        if(!value) return ''
                        value = value.toString()
                        return value.charAt(0).toUpperCase() + value.slice(1)
                        
                    }
                }
            })
        </script>
    </body>
</html>

下面是运行截图：

徐小硕

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js_模板语法_认识和理解

Vue.js 模板语法Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。<!DOCTYPE html>&lt...
复制链接

扫一扫