VUE基本语法

最新推荐文章于 2024-02-04 14:52:21 发布

人苼若只茹初見

最新推荐文章于 2024-02-04 14:52:21 发布

阅读量119

点赞数

分类专栏： VUE.JS 文章标签： vue

本文链接：https://blog.csdn.net/printf88/article/details/113471237

版权

VUE.JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

vue基础语法

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的

Var vm=new Vue({})｛
    基础属性：
    el:获取执行vue的dom元素－初始化范围
    data ：存储数据
    methods ：执行的方法

｝

1，绑定数据
{{}} 或者 v-text=“” 只能绑定文本
vue中 v-html专门处理带标签的数据
表达式在{{}}中 ±*/ 直接可用

2，事件绑定

v-blind：title=" " 或者：title
v-on:click="＂或者 @click＝＂"
methods:专门写函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style>
    [v-cloak]{
        display: none;
    }
    </style>
</head>
<body>
    
    <div id="app">
        <!--使用v-cloak能够解决插值表达式闪烁的问题-->
    <p v-cloak>+++++{{msg}}-----</p>
        <!--默认v-text没有闪烁问题-->
        <!--v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的占位符，不会把整个元素内容清空-->
    <h4 v-text="msg">+++++++</h4>
    <div v-text="msg2"> </div>
    <div v-html="msg2"> </div>
    <!--v-blind 是vue中提供的用于绑定属性的指令  v-bind可以被简写为：-->
    <!--v-on 事件绑定机制缩写是@·-->
    <input type="button" value="按钮" v-bind:title="mytitle +'123'" v-on:click="show">
    </div>
   <script>
   var vm = new Vue({//vue实例
       el:'#app',//表示当前new的这vue实例，要控制页面上哪个区域
       data:{ //data存放el要用的数据
        msg:'123',//通过vue提供的指令将数据渲染到页面上，不用手动操作dom元素
         msg2:'<h1>h123456</h1>',
         mytitle:'自定义title'
       },
       methods:{
           show:function(){
               alert('hellow')
           }
       }
   })
   </script> 
</body>
</html><!DOCTYPE html>
<html>

运行结果如下