VUE2

开始

导入JS

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

Hello Word

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

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

取消警告

    //取消 Vue 所有的日志与警告。
    Vue.config.silent = false
    // 务必在加载 Vue 之后，立即同步设置以下内容
    Vue.config.devtools = false
    //设置为 false 以阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false

指令

指令	完整形式	简写形式	用途
v-model	v-model="data"	无简写	双向数据绑定（表单元素）
v-on	v-on:事件名="方法"	@事件名="方法"	监听 DOM 事件
v-bind	v-bind:属性名="值"	:属性名="值"	动态绑定属性或组件 props

双向绑定 v-model

<input v-model:value="model.name"/> -> <span>{{model.name}}</span>

单向绑定 v-bind

<input v-bind:value="bind.name"/> -> <span>{{bind.name}}</span>

监听 DOM 事件 v-on

<button v-on:click="bu1Fun1">点我啊1</button>
<button @click="bu1Fun2(1,$event)">点我啊2</button>

监听 DOM 事件 V-HTML

<p>rawHtml 文本内容: {{ rawHtml }}</p>

自定义指令

<div v-test="formatNow"></div>

示例

点击查看

var app = new Vue({
  el: '#app',
  data() {
      return {
          rawHtml:"<span style=\"color: red\">This should be red.</span>",
          bind: {
              name: '我是不会变化的',
          },
          model: {
              name: '原神启动',
          },
      }
  }, 
  computed:{
        formatNow(){
            const now = this.nowDate;
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            return  `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        }
    },
    directives:{
        //指令的this是windows
        test:{
            // bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
            // inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
            // update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
            // componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
            // unbind：只调用一次，指令与元素解绑时调用。
            bind(ele,binding){
                console.log("111",ele)
                console.log("2222",binding)
                ele.innerHTML = "初始化自定义函数："+binding.value
            },
            inserted(ele,binding){
                console.log("111",ele)
                console.log("2222",binding)
                ele.innerHTML = "生成自定义函数："+binding.value
            },
            update(ele,binding){
                console.log("111",ele)
                console.log("2222",binding)
                ele.innerHTML = "自定义函数绑定内容变更："+binding.value
            }


        }
    }
})

修饰符

事件修饰符

    <li><span>stop</span>:<span>阻止事件传播</span></li>
    <li><span>prevent</span>:<span>阻止事件冒泡</span></li>
    <li><span>once</span>:<span>事件只触发一次</span></li>
    <li><span>capture</span>:<span>使用事件捕获模式</span></li>
    <li><span>self</span>:<span>只有event，target 是当前元素时执行事件</span></li>
    <li><span>passive</span>:<span>事件默认行为立即执行，无需等待事件回调</span></li>
    <a  href="http://lol.qq.com" @click.prevent="bu1Fun2(1,$event)">点我啊2</a>

按键修饰符

    <li><span>enter</span>:<span>回车</span></li>
    <li><span>tab</span>:<span>tab</span></li>
    <li><span>delete</span>:<span>(捕获“删除”和“退格”键)</span></li>
    <li><span>esc</span>:<span>esc</span></li>
    <li><span>space</span>:<span>space</span></li>
    <li><span>up</span>:<span>up</span></li>
    <li><span>down</span>:<span>down</span></li>
    <li><span>left</span>:<span>left</span></li>
    <li><span>right</span>:<span>right</span></li>
    <input  placeholder="输入后看看控制台" @keydown="input_key">

计算/监听/过滤

    <h5> 计算/监听/过滤器 </h5>
    <p>时间：{{formatNow|getCurrentSeconds}}</p>
    <p>当前时间：{{formatNow}},运行了多少{{totalSecond}}秒 </p>

computed 计算

let config = {
    el: '#app',
    data(){
        return {
            nowDate:new Date(),
        }
    },
    computed:{
        formatNow(){
            const now = this.nowDate;
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            return  `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        }
    },
}
const app = new Vue(config)
//挂载
app.$mount("#container")

watch 监听

let config = {
    el: '#app',
    data(){
        return {
            totalSecond:0
        }
    },
    watch:{
        nowDate(n,o){
            this.totalSecond++
        }
    },
}
const app = new Vue(config)
//挂载
app.$mount("#container")

filters 过滤

let config = {
    el: '#app',
    filters:{
        getCurrentSeconds(val){
            return val.split(" ")[1];
        }
    }
}
const app = new Vue(config)
//挂载
app.$mount("#container")

组件

    <div id="container">
        <name-content></name-content>
        <sex></sex>
    </div>

   let nameContent =  Vue.extend({
        name:"nameContent",
        template: `<h1>{{name}}</h1>`,
        data(){
            return{
                name:"小明"
            }
        }
    })

   let sexContent =  Vue.extend({
       name:"sexContent",
       template: `<h2>{{sex}}</h2>`,
       data(){
           return{
               sex:"男"
           }
       }
   })

   //全局组件
   Vue.component("sex",sexContent)

   //局部注册
    const app = new Vue({
        el: '#container',
        components:{
            nameContent
        }
    })

VUE3