vue基本语法

发表于 | 分类于

vue

1. 直接在html引入vue.js

1
2
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
//中间的网址即为下载地址

2.jquery与vue的异同

  • jquery.js提供$或者jquery全局变量
  • vue.js提供vue全局变量
  • Vue的核心库只关注视图层，读音view
  • 双向数据绑定，data里数据改变视图也改变
  • 如果页面注重操作节点，用jquery
  • 如果页面数据比较多，建议用vue

二、开发工具

1.用git下载谷歌浏览器工具，然后方便我们开发vue项目

1
git clone https://github.com/vuejs/vue-devtools.git
  • 此时你会看到文件中多了一个vue-devtools文件
  • 进入到这个文件npm install，安装依赖包；
  • 安装成功之后npm run build
  • 若不执行以上命令会报错，无法加载背景脚本”build/background.js” //……
  • 打开shells>chrome>manifest.json并把json文件里的”persistent”:false改成true //……..
  • 打开chrome浏览器，打开更多工具>扩展程序；
  • 再点击加载已解压的扩展程序，然后把shells>chrome文件夹放入

三、helloworld

1.先实例化Vue,里面允许我们放很多选项(https://cn.vuejs.org/v2/api/),可以放**数据，DOM，生命钩子，资源和组合**

1
2
3
var vm = new Vue({
  // 选项
})

2.你用jQ，第一要有数据，第二要有节点，没节点，数据没意义

1
2
3
$.ajax()//
$(el).html(data)
//寻找节点，然后放数据

3.放入必要的选项，el和data是必须要有的

1
el就是寻找节点（找作用域），data就是配合`{{}}`来渲染数据
1
2
3
4
5
6
7
var vm = new Vue({
    // 选项
    data:{
        name:"lemon1"
    },
    el:"#demo"
})

4.在view层的id为demo的作用域里面配合双括号绑定数据

1
2
3
<div id="demo">
    <p>{{num+1+'1'}}</p>
</div>

四、jQuery和Vue的表达式和指令

1.文本值

1
2
3
4
5
6
jq写法
$().text();

vue写法
<p>{{name}}</p>
<p v-text="name"></p>

2.属性值

  • :style和:class是必须接受一个对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    <style>
           .red{
               color:red
           }
           .bg{
               background-color:yellow
           }
           .size{
               font-size:28px
           }
       </style>
       <div id="demo">
           <p :name="name" :id="name+'&laoxie'">属性</p>
           <p :style="style1">样式1</p>
           
           ===========================================
           <p :style="{
               color:'red',
               fontSize:'14px',
               backgroundColor:'yellow'
           }">样式2</p>
           <p :class="class1">样式1</p>
       </div>
       =====================================================
       <script src="../../js/vue.js"></script>

    var vm = new Vue({
               // 选项
               // 数据选项
               data:{
                   name:"lemon",
                   style1:{
                       color:'red',
                       fontSize:'14px',
                       backgroundColor:'yellow'
                   },
                   class1:{
                       red:true,
                       bg:false,
                       size:true
                   }
               },
               el:"#demo"
           })
     
     解释：就是你要是写style样式，或者是要以类名的方式添加样式，就要在下面写成对象的方式，然后再给上面添加变量即可

  • :xxx都可以接受任何变量

1
2
3
4
5
6
7
jq写法
$().attr();
$().css();
$().addClass();

vue写法
<p :name="name"></p>
  • 插入html结构
1
2
3
$().html()

<div v-html="html"></div>
  • 显示或者隐藏，本质是控制css，节点一直存在的，频繁切换（选项卡，加载的动画）
1
2
3
4
5
6
jq写法
$().show()
$().hide()

vue写法
<div v-show="!bool">你好</div>
  • 对节点增加或者删除，节点要不存在或者不存在
1
2
3
4
5
6
7
jq写法
$().append()
$().remove()

vue写法
<div v-if="!bool">你好</div>
<div v-else>假的</div>
  • v-for放哪里，那个节点就跟着遍历对应的数组,支持嵌套其他指令v-for,v-if和v-show
1
2
3
4
5
6
7
8
9
jq写法
$().each()

vue写法
<div v-for="item in arr" v-text="item.name"></div>

备注：
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表
  • v-on:click简写为@click，就是把原生的onmousedown->@mousedown，把on改为@，把事件监听函数方法选项的methods里面
1
2
3
4
5
6
jq写法
$().on()
$().click()

vue写法
<button @click="loadMore">查看更多</button>
  • v-bind:xxx简写为:xxx
1
2
3
4
<p v-bind:name="name">测试</p>
==============================
<p :name="name">测试</p>
备注：两种写法为一个意思
  • v-model是把视图的值，带回选项data里面，只能用在这三个标签里面
  • 视图层影响数据层v-model或者v-on:click
1
2
3
4
5
<input v-model="name" />
<select>
<textarea>

备注：v-model链接data中定义的数据

五、data、methods、双括号

  • data用于定义属性
1
2
3
4
5
6
7
8
例如：
data:{
    name:"lemon",
    style1:{
    color:'red',
    fontSize:'14px',
    backgroundColor:'yellow'
},
  • methods 用于定义的函数，可以通过 return 来返回函数值。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
methods: {
    testClick: function () {
    console.log("你触发了点击事件")
    },
    testKeyup() {
    console.log("你触发了输入事件")
    },
    loadMore() {
    this.arr.push({
    name: 'laotian',
    age: 16,
    skill: ['xmind']
    })
    }
}
  • 双括号 用于输出对象属性和函数返回值。 
1
2
3
4
5
<div id="demo">
        <p>{{name}}</p>
        <p>{{arr}}</p>
        <p>{{arr[0]}}</p>
    </div>

六、模板语法

  • 使用v-html指令用于输出html代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="demo">
        <div v-html="html"></div>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        new Vue({
            el: "#demo",
            data: {
                html: "<p>123<span>456</span>789</p>"
            }
        })
    </script>

备注：v-html一般用于输出HTML结构