Vue学习第一天：模板语法

最新推荐文章于 2024-07-23 16:37:55 发布

遥远的相似性.

最新推荐文章于 2024-07-23 16:37:55 发布

阅读量73

点赞数

分类专栏： HTML 文章标签： html5 javascript vue.js

本文链接：https://blog.csdn.net/biquandaren/article/details/108477807

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、Vue的基本使用

		//创建一个Vue对象
        var vm=new Vue({
            //进行元素选择
            //el可以为选择器或者DOM元素，一般使用选择器
            el:"#app",
            //data为要渲染到页面中的数据
            data:{
                message:'Hello Vue!'
            },
            //methods为元素绑定的方法
            methods:{
                // 绑定的方法，如
                handle:function(){
                	
                }
            }
        })

2、Vue模板语法
①差值表达式语法:{{ 变量 }}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" >
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>{{ message }}</div>
    </div>
    <!-- 引入Vue文件 -->
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        var vm=new Vue({
            el:"#app",
            data:{
                message:'Hello Vue!'
            }
        })
    </script>
</body>
</html>

页面的显示结果为 : Hello Vue!

②指令语法：

v-text 向标签中填充纯文本
v-html 向便签中填充含html标签的文本，可以解析html标签
v-pre 原文输出

<div id="app">
        <div v-text='message'></div>
        <div v-html='message1'></div>
        <div v-pre>{{message}}</div>
    </div>
    <!-- 引入Vue -->
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        var vm=new Vue({
            el:"#app",
            data:{
                message:'Hello Vue!',
                message1:'<h1>Hello Vue!</h1>'
            },
          })
    </script>

页面显示的结果分别为：

Hello Vue!
Hello Vue!
{{message}}

③指令：事件绑定
语法：v-on：事件名（如click）=‘处理事件的方法(函数)’
处理事件的方法有两种写法:

<div v-on:click='handle'></div>
<div v-on:click='handle()'></div>

阻止事件冒泡

<div v-on:click.stop='handle'></div>
<div v-on:click.stop='handle()'></div>

阻止默认行为

<div v-on:click.prevent='handle'></div>
<div v-on:click.prevent='handle()'></div>

有其他参数需要传递可以使用第二种方法

④指令：属性绑定

<div v-bind:"{}"></div>
<div v-bind:"[]"></div>

遥远的相似性.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习第一天：模板语法

Vue学习第一天：模板语法1、Vue的基本使用 //创建一个Vue对象 var vm=new Vue({ //进行元素选择 //el可以为选择器或者DOM元素，一般使用选择器 el:"#app", //data为要渲染到页面中的数据 data:{ message:'Hello Vue!' },
复制链接

扫一扫