Vue初次使用 - Blog of Code

id选择器

可以使用el作为挂载点，在el命中的元素内部，可以自由使用 {{message}}（插值表达式），在el中，#是id选择器。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>Hello World</title>
  </head>
  <body>
<!--  在el命中的元素内部，可以自由使用  {{message}}-->
    <div id="app">
        {{message}} 
    </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script >
      const app = new Vue({
          el:"#app", //#是id选择器
          data:{
              message:"hello vue!"
          }
      })
  </script>
  </body>
</html>

类选择器

也可以使用类作为挂载点，这时.app为选择器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>Hello World</title>
  </head>
  <body>
<!--  在el命中的元素内部，可以自由使用  {{message}}-->
    <div class="app">
        {{message}}
    </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script >
      const app = new Vue({
          el:".app", //#是id选择器
          data:{
              message:"hello vue!"
          }
      })
  </script>
  </body>
</html>

标签选择器

所有div标签都可以使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>Hello World</title>
  </head>
  <body>
<!--  在el命中的元素内部，可以自由使用  {{message}}-->
    <div class="app">
        {{message}}
    </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script >
      const app = new Vue({
          el:"div", //#是id选择器
          data:{
              message:"hello vue!"
          }
      })
  </script>
  </body>
</html>

在开发中推荐使用id选择器，因为id是唯一的。

注意：不要在body挂vue。

数据获取

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>Hello World</title>
  </head>
  <body>
<!--  在el命中的元素内部，可以自由使用  {{message}}-->
    <div id="app">
        {{message}}
        <p>{{school.name}}</p>
<!--        对象访问-->
        <ul>
            <li>
                {{campus[0]}}  
<!--                数组访问-->
            </li>
        </ul>
    </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script >
      new Vue({
          el:"#app", //#是id选择器
          data:{
              message:"hello vue!",
              school:{
                  name:"zzu",
                  location:"郑州"
              },
              campus:["北校区","南校区"]
          }
      })
  </script>
  </body>
</html>

v-text

v-text会把数据解析为文本

<p v-text="message"></p>

也可以直接使用插值表达式，不过这里不能在后面添加字符串

可以使用使用如下两种写法添加，效果相同

{{message+"hello"}}
{{message}}hello

hello vue!hello

v-html

html会把数据中的内容以html形式显示出来

 <body>
<!--  在el命中的元素内部，可以自由使用  {{message}}-->
    <div id="app">
        <p v-html="content"></p>
<!--        对象访问-->
        <ul>
            <li>
                {{campus[0]}}
<!--                数组访问-->
            </li>
        </ul>
    </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script >
      new Vue({
          el:"#app", //#是id选择器
          data:{
              message:"hello vue!",
              content:"<h1> me </h1>",
              school:{
                  name:"zzu",
                  location:"郑州"
              },
              campus:["北校区","南校区"]
          }
      })
  </script>
  </body>

v-on

为元素绑定事件

使用v-on和@的效果是一样的。

这里要注意，动作函数要写在methods里。

<div id="app">
    <input type="button" value="v-on单击" @click="czt">
    <input type="button" value="v-on双击" @dblclick="czt">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app", //#是id选择器
        data: {
            message: "hello vue!",
            content: "<h1> me </h1>",
            school: {
                name: "zzu",
                location: "郑州"
            },
            campus: ["北校区", "南校区"]
        },
        methods: {
            czt: function () {
                alert("hello");
            }
        }
    })

注意，函数中访问的数据需要保存在data字段里。

 new Vue({
        el: "#app", //#是id选择器
        data: {
            message: "hello vue!",
            content: "<h1> me </h1>",
            food:"番茄炒蛋",
            school: {
                name: "zzu",
                location: "郑州"
            },
            campus: ["北校区", "南校区"]
        },
        methods: {
            czt: function () {
                alert("hello");
            },
            changeFood:function (){
                this.food+="!"
                alert(this.food);
            }

        }

计数器

功能很简单，就是上面介绍方法的实现

<body>
<!--  在el命中的元素内部，可以自由使用  {{message}}-->
<div id="app">
    <button @click="sub">-</button>
    <span>{{num}}</span>
    <button @click="add">+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app", //#是id选择器
        data: {
            num: 0
        },
        methods: {
            sub: function () {
                if (this.num > 0) {
                    this.num -= 1;
                }
            },
            add :function (){
                if(this.num<10){
                    this.num+=1;
                }
            }
        }
    })
</script>
</body>

DOM树

HTML/XML 文档在浏览器内均被表示为 DOM 树。

标签（tag）成为元素节点，并形成文档结构。
文本（text）成为文本节点。
……等，HTML 中的所有东西在 DOM 中都有它的位置，甚至对注释也是如此。

v-show与v-if

v-show可以根据表达式的条件，使某个元素根据条件显示，v-show中的元素依旧存在于DOM树中。

v-if与v-show实现同样的功能，v-if中的元素若不显示，则被移出DOM树。因此开销较大。

v–if和v–show都是用来控制元素的渲染。 v–if判断是否加载，可以减轻服务器的压力，在需要时加载,但有更高的切换开销;v–show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。

<button @click="sub" v-show="num>5">-</button>

当num大于5后，-号才显示。这个地方也可以直接是bool值。

v-bind

v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定

深入理解v-bind指令

v-for

v-for用于自动遍历数组，并把标签和其中的内容重复数组长度

<body>
<!--  在el命中的元素内部，可以自由使用  {{message}}-->
<div id="app">
   <ul>
       <li v-for="item in arr">
           你好{{item}}
       </li>
   </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app", //#是id选择器
        data: {
            num: 0,
            text:"hello",
            arr:[1,3,5,6]
        })
</script>
</body>

输出

你好1
你好3
你好5
你好6

还可以使用第二个参数获取索引

<li v-for="(item,index) in arr">
           {{index}}你好{{item}}
       </li>

v-on

v-on用于事件处理，可以用来调用函数或者根据用户键盘鼠标输入做出响应。

V-on的详细使用

V-model

获取和设置表单的值（双向数据绑定）

<body>
<!--  在el命中的元素内部，可以自由使用  {{message}}-->
<div id="app">
   <input type="text" v-model="message"/>
    <h2>{{message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app", //#是id选择器

        data: {
            arr:[],
            message:"czt"
        }
    })
</script>
</body>

更改输入框中的内容，message的内容也随之改变。

练习：记事本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>Hello World</title>
</head>
<body>
<!--  在el命中的元素内部，可以自由使用  {{message}}-->
<div id="app">
   <input type="text" v-model="message" v-on:keyup.enter="add"/>
    <ul>
        <li v-for="item in arr">
            {{item}}
        </li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app", //#是id选择器

        data: {
            arr:[],
            message:"请输入内容"
        },
        methods:{
            add:function (){
                this.arr.push(this.message);
            }
        }
    })
</script>
</body>
</html>

Axios的使用

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

id选择器

类选择器

标签选择器

数据获取

v-text

v-html

v-on

计数器

DOM树

v-show与v-if

v-bind

v-for

v-on

V-model

练习：记事本

Axios的使用

相似文章:

VUE项目搭建规范

浅拷贝与深拷贝

VUE3之VUEX

发表评论取消回复