vue入门

最新推荐文章于 2022-04-19 14:42:18 发布

VIP文章吾可以

最新推荐文章于 2022-04-19 14:42:18 发布

阅读量64

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/hzrxdh/article/details/118399368

版权

一 vue基础

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="mydiv">
    {
  {name}}--
    {
  {age}}--
    {
  {sex}}--
    {
  {hobby[0]}}--
    {
  {hobby[1]}}--
    {
  {obj.school}}--
    {
  {obj.addr}}
</div>
</body>
<script>
    var app=new Vue({
        el:"#mydiv",
        data:{
            name:"邓衡",
            age:18,
            sex:"男",
            hobby:["看书","学java"],
    obj:{school:"aaa",addr:"地球"}
    }
    });
</script>
</html>

1、el挂载点： el是用来设置Vue实例挂载（管理）的元素，vue会管理el选项命中的元素及其内部的后代元素。

2、data：数据对象：Vue中用到的数据定义在data中， data中可以写复杂类型的数据，渲染复杂类型数据时,遵守js的语法即可。

二 vue本地应用

用vue开发网页，获取元素，操作网页

1、内容绑定,事件绑定

v-text：

设置标签的文本值(textContent),默认写法会替换全部内容,使用差值表达式{ {}}可以替换指定内容,内部支持写表达式.

v-html:

作用是:设置元素的innerHTML,内容中有html结构会被解析为标签, v-text指令无论内容是什么,只会解析为文本,解析文本使用v-text,需要解析html结构使用v-html.

v-on:

作用是:为元素绑定事件.事件名不需要写on, 指令可以简写为@,绑定的方法定义在methods属性中, 方法内部通过this关键字可以访问定义在data中数据

案例测试：计数器

data中定义数据:比如num

methods中添加两个方法:比如add(递增),sub(递减)

使用v-text将num设置给span标签

使用v-on将add,sub分别绑定给+,-按钮

累加的逻辑:小于10累加,否则提示

递减的逻辑:大于0递减,否则提示

主体代码：

<!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>
    <link rel="stylesheet" href="./css/index.css" />
</head>
<body>
<div id="app">
    <div class="input-num">
        <button @click="jian">
            -
        </button>

        <span>{
  {num}}</span>

        <button @click="add">
            +
        </button>
    </div>
    <img src="http://qnaaa.zzaaa.net/aaajy/logo.png" alt="" />
</div>
<!--引用vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">&

最低0.47元/天解锁文章

吾可以

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue入门

一 vue基础<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/vue.js"></script></head><body><div id="mydiv"
复制链接

扫一扫