Vue 01-基础入门-引入到Html中

2021-03-05 本文已影响0人我问你瓜保熟吗

一、传统开发方式引入vue.js

<!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">
    <title>Vue</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    
    <div id="app">
        {{ message }}
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>


</body>
</html>

二、vue指令

指令是带有v-表达式，当表达式改变后将响应式的影响所作用的DOM。

v-once：在标签里添加这个指令后，标签包裹的变量只会变一次。<p v-once>{{message}}</p>
v-html：使用个指令后，指定的变量将会在输出Html渲染后的内容，而非普通文本 <p v-html="rawHtml"></p>
v-if：根据表达式的真假来插入/移除所作用的元素，<p v-if="true">现在你看到了我</p>
v-show：同v-if类似，但是标签无论是否显示，始终渲染并存在，可同v-else-if ，v-else组合使用。
v-bind：可简写为:，为标签内的属性绑定动态变量，<div v-bind:id="dynamicId"></div>
v-on：可简写为@该指令用来监听 DOM 事件，并在触发时运行指定函数或js代码。<button v-on:click="counter += 1">Add 1</button>，使用.stop事件后，将不会将事件影响到其他dom<button @click.stop="counter += 1">Add 1</button>
v-for：

三、表单双向绑定

v-model：此指令在<input>、<select>、<textarea>等表单标签上创建双向数据绑定

<input v-model="message">

 data: {
    message: 'Hello Vue!'
  }

v-model

四、组件

组件是可复用的vue实例，使用Vue.component函数创建全局组件，props定义属性，data定义数据，template定义模板。
组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
组件可以给标签自定义属性，即prop，可以通过 Prop 向子组件传递数据。
插槽用来向组件传递内容，将<slot></slot>标签放在模板里，可以在引用组件时，组件中间写任意的html标签或文本进行替换。
一个组件的模板必须只能有一个根节点。

1. 全局注册

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=i, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <button-counter tit="title1：">
            <h2>我是slot插槽</h2>
        </button-counter>
        <button-counter tit="b:"></button-counter>
    </div>

    <script type="text/javascript">
        Vue.component('button-counter', {
            props: ["tit"],
            data: function () {
                return {
                    count: 0
                }
            },
            template: '<div><button v-on:click="count++">{{tit}}点我{{count}}</button><slot></slot></div>'
        })

        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {},
        });
    </script>

    <style type="text/css"></style>
</body>

</html>

2. 局部注册

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=i, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <testComponent></testComponent>
    </div>

    <script type="text/javascript">

        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {},
            components: {
                testComponent: "<h2>h2...</h2>",
                methods: {

                },
            }
        });
    </script>

    <style type="text/css"></style>
</body>

</html

组件文件，需要在vue脚手架里使用

创建自定义的test.vue组件

<template>
<h2 class="red">h2...</h2>
</template>

<script>
export default {
  name: 'test',
  props:{
      msg:{
          type:String,
          default:"test msg"
      }
  },
  data(){

  },
  methods:{

  }
}
</script>

<style>
.red{color: red;}
</style>

在根组件App.vue里：导入、注册、引用。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <test></test>
  </div>
</template>

<script>
import Test from './components/test.vue'

export default {
  name: 'App',
  components: {
    Test
  }
}
</script>

<style>
</style>