Loading

VUE基本使用

第一个vue项目

# 一个页面中使用vue，vue的代码引入（跟引入jq一模一样）
# 编辑器的选择
	-vscode
    -webstorm ----》pycharm上开发前端
    -sublime text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">
    <p>我的名字是：{{name}}</p>
    <p>我的年龄是：{{age}}</p>



</div>

</body>
<script>
    // vm对象，管理了html中得div，在div中写vue的模板语法，指令
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'lqz',
            age:19
        },

    })
</script>
</html>

模板语法之插值

插值语法:

可以放 字符串，数字，数组，对象，简单的js语法，如果是标签，不会之间渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">
<p>名字：{{name}}</p>
<p>年龄：{{age}}</p>
<p>数组：{{list1}}</p>---->{{list1[1]}}
<p>对象：{{obj1}}</p>---》{{obj1.name}}--->{{obj1['age']}}
<p>标签：{{link1}}</p>

<p>{{10+99}}</p>
<p>三目运算符：{{score>90?"优秀":"垃圾"}}</p>


</div>

</body>
<script>
    // vm对象，管理了html中得div，在div中写vue的模板语法，指令
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'lqz', // 字符串
            age: 18, // 数值
            list1: [1,2,3,4],   // 数组
            obj1: {name: 'Darker', age: 19}, // 对象
            link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>',
            score:99
        },

    })
</script>
</html>

文本指令

// 指令----》写在标签上 以  v-开头的  属性 叫vue的指令

-v-text   ：把字符串原封不动显示在标签上
-v-html  ：把标签字符串渲染后，显示在标签里
-v-show ：显示与不显示 ：style="display: none;" 
-v-if   ：显示与不显示，直接标签的删除


// v-show与 v-if的区别：
v-show：标签还在，只是不显示了（display: none）
v-if：直接操作DOM，删除/插入 标签


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">

    <div v-text="link1">

    </div>
    <p v-html="link1"></p>

    <img v-show="show" src="https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg" alt="" height="100px"
         width="100px">
    <hr>
    <img v-if="show2" src="./img/jj.jpg" alt="" height="100px" width="100px">


</div>

</body>
<script>
    // vm对象，管理了html中得div，在div中写vue的模板语法，指令
    var vm = new Vue({
        el: '#app',
        data: {
            link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>',
            show: true,
            show2: true,

        },

    })
</script>
</html>

事件指令

# 按钮，标签的事件---》单击事件，双击事件----》单击事件(点击)
#正常写法： v-on:click='函数'
#简写成：   @click='函数'   ---》这种多

属性指令

# 标签有属性----》使用变量动态的替换属性
# v-bind:属性名='属性值'
#简写成  :属性名='属性值'   --->这种多
posted @ 2022-06-26 20:05  香菜根  阅读(41)  评论(0)    收藏  举报