Vue笔记【持续更新】【二】

最新推荐文章于 2024-07-23 21:45:00 发布

念故思旧

最新推荐文章于 2024-07-23 21:45:00 发布

阅读量55

点赞数

分类专栏： Vue2学习文章标签： vue.js 笔记前端

本文链接：https://blog.csdn.net/weixin_56612338/article/details/132944545

版权

Vue2学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文章目录

- - 三.Vue的核心语法

三.Vue的核心语法

1.模板语法之插值语法

{{}}这个里面到底可以写什么呢？

（1）data属性里面自己写的属性名

data: {
     msg: '你好Vue',
     detail: 'hello'
}

（2）常量

{{123}}
{{'hello'}}
{{3.14}}
...

（3）、合法的javascript表达式

{{'hello'+1}}
{{1+1}}
{{true?'男':'女'}}<!--三目运算符-->
...

（4）一些Vue规定的白名单

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 等。
 'Infinity,undefined,NaN,isFinite,isNaN,' 
 'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' 
  'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' 
  'require'

1.1 参考代码

<!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>Vue的{{}}可以写什么</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <!-- 1.可以写data里面的属性 -->
        <h1>{{msg}}</h1>
        <!-- 2.常量 -->
        <h1>{{100}}</h1>
        <h1>{{'Vue牛'}}</h1>
        <h1>{{3.14}}</h1>
        <!-- 3.javascript合法表达式 -->
        <h1>{{1+10}}</h1>
        <h1>{{msg+1}}</h1>
        <h1>{{"hello"+msg}}</h1>
        <h1>{{sex?'男':'女'}}</h1>
        <!-- 4.白名单里面的属性 -->
        <h1>{{Date.now()}}</h1>
        <h1>{{Math.ceil(3.14)}}</h1>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成生产提示
    //创建Vue实例
    new Vue({
        el: '#root',
        data: {
            msg: '学习Vue!!!',
            sex: true
        },
    });
</script>

</html>

2.模板语法之指令语法

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
举例：v-bind:href=“xxx” 或简写为 :href=“xxx”，xxx同样要写js表达式，
且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-???。

例如:

（1）v-once

语法格式:<html标签 v-once></html标签>

**v-once:**执行一次性地插值，当数据改变时，插值处的内容不会更新,这样做是为了提高性能，因为网站有一些数据

只需要获取一次，之后就不再改变数据，如果每一次都从data中获取的话影响性能

（2）v-if

语法格式:<html标签 v-if="表达式></html标签>

**v-if=“表达式”：**表达式为真显示内容，表达式为假，不会渲染元素，并不是css里面的隐藏"

2.1参考代码

<!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 type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h1 v-once>{{msg}}</h1>
        <h1>{{msg}}</h1>
        <h1 v-if="true">{{msg2}}</h1>
        <h1 v-if="b > a">{{msg2}}</h1>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成生产提示
    //创建Vue实例
    new Vue({
        el: '#root',
        data: {
            msg: 'Hello Vue!!!',
            msg2: 'v-if的测试',
            a: 10,
            b: 9
        },
    });
</script>

</html>

3.数据绑定的两种方式

3.1单向数据绑定

数据只能从data流向页面。动态绑定数据

语法格式：（1）<html标签 v-bind:属性名=“data里面的属性名”></html标签>

（2）简写：<html标签 :属性名=“data里面的属性名”></html标签>

3.1.1 参考代码

<!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>动态数据绑定</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <!-- 

            语法格式:
            <html标签 v-bind:属性名="data里面的属性名"></html标签>
            作用:
            动态数据绑定
            编译前:<span v-bind:abc="xyz"></span>
            编译后:<span aaa="abc"></span>
         -->
        <span v-bind:aaa="xyz"></span><br>
        <!-- 图片 -->
        <img v-bind:src="imgPath"><br>
        <!-- 超链接 -->
        <a v-bind:href="url">动态跳转</a><br>
        <!-- 
            简写形式:
            <html标签 :属性名="data里面的属性名"></html标签>
         -->
        <img :src="imgPath"><br>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成生产提示
    //创建Vue实例
    new Vue({
        el: '#root',
        data: {
            xyz: 'abc',
            imgPath: '../img/1.jpg',
            url: 'https://www.baidu.com'
        },
    });
</script>

</html>

3.2双向数据绑定

数据不仅能从data流向页面，还可以从页面流向data。
备注：1.双向绑定一般都应用在表单类元素上（如：input、select、textArea等）2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
语法格式：（1）<html标签 v-model:属性名=“data中的属性名”>

（2）简写形式：<html标签 v-model=“data中的属性名”>

3.2.1 参考代码

<!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 type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <!-- 单向数据绑定 -->
        v-bind指令:<input type="text" :value="name"><br>
        <!-- 双向数据绑定 -->
        <!-- 
            语法规则:
            <html标签 v-model:属性名="data中的属性名"></html>
         -->
        v-model指令:<input type="text" v-model:value="name2"><br>
        v-model简写:<input type="text" v-model="name2"><br>
        <!-- 注意:v-model一般用于表单，如input,select,textarea -->
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成生产提示
    //创建Vue实例
    new Vue({
        el: '#root',
        data: {
            name: 'zhangsan',
            name2: 'wangwu'
        },
    });
</script>

</html>