Vue.JS

和JQuery一个思路，接下来重点学习Vue3相关的知识：

使用 mount('#hello-vue') 将 Vue 应用 HelloVueApp 挂载到 <div id="hello-vue"></div> 中。

<div id="hello-vue" class="demo">
    {{ message }}
</div>
const HelloVueApp={
    data(){
        return {
            message: 'Hello'
        }
    }
}
Vue.createApp(HelloVueApp).mount("#hello-vue")

{{ }} 用于输出对象属性和函数返回值。

{{ message }} 对应应用中 message 的值。
下面的例子在应用中定义了一个方法

const app=Vue.createApp({
    data(){
        return {
            count:4
        }
    },
    methods:{
        increment(){
            //this指代该组件
            this.count++
        }
    }
})
const vm = app.mount('#app')

document.write(vm.count) // => 4
document.write("<br>")
vm.increment()

document.write(vm.count) // => 5

Vue标签

v-model实现表单数据双向绑定

<div id="app" class="demo">
    <input type="text" v-model="message">
    <p>{{message}}</p>
</div>

<script>
const HelloVue={
    data(){
        return{
            message:'hello'
        }
    }
}
Vue.createApp(HelloVue).mount('#app')
</script>

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

v-bind绑定数据到html元素的属性上

<div id="app" class="demo">
  <img v-bind:src="imageSrc">
</div>

<script>
const HelloVue={
    data(){
        return{
            imageSrc: 'https://static.jyshare.com/images/code-icon-script.png'
    }
        }
    }
}
Vue.createApp(HelloVue).mount('#app')
</script>

v-if 和 v-else 指令根据表达式的值来条件性地渲染元素或组件

<div id="app" class="demo">
    <p v-if="showMessage">Hello Vue!</p>
	<p v-else>good bye</p>
</div>

<script>
const HelloVue={
    data(){
        return{
            showMessage: true
        }
    }
}
Vue.createApp(HelloVue).mount('#app')
</script>

对于多个页面元素，可以采取以下写法：

 <template v-if="showMessage">
        <h1>网站</h1>
        <p>Google</p>
        <p>Runoob</p>
        <p>Taobao</p>
 </template>

v-for 指令根据数组的属性值循环渲染元素或组件

<div id="app" class="demo">
    <ul>
        <li v-for="item in items" :key="item.id">
            {{item.text}}
        </li>
    </ul>
</div>

<script>
const HelloVueApp = {
  data() {
    return {
        items:[
            {id:1,text:'Item1'},
            {id:2,text:'Item2'},
            {id:3,text:'Item3'}
        ]
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>

如果循环多个元素，采用下面的写法：

<template v-for="site in sites">
    <li>{{site.text}}</li>
    <li></li>
</template>

v-on 指令在 HTML 元素上绑定事件监听器,v-show 用于根据表达式的值来条件性地显示或隐藏元素

<div id="app" class="demo">
    <button v-on:click="showMessage= !showMessage">显示/隐藏</button>
    <p v-show="showMessage">hello</p>
</div>

<script>
const HelloVue={
    data(){
        return{
            showMessage: true
        }
    }
}
Vue.createApp(HelloVue).mount('#app')
</script>

v-html 指令用于输出 html 代码

<div id="example1" class="demo">
    <p>使用双大括号的文本插值: {{ rawHtml }}</p>
    <p>使用 v-html 指令: <span v-html="rawHtml"></span></p>
</div>
 
<script>
const RenderHtmlApp = {
  data() {
    return {
      rawHtml: '<span style="color: red">这里会显示红色！</span>'
    }
  }
}
 
Vue.createApp(RenderHtmlApp).mount('#example1')
</script>

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>

Vue模板语法

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：
{{...}} 标签的内容将会被替代为对应组件实例中 message 属性的值，如果 message 属性的值发生了改变，{{...}} 标签内容也会更新。

如果不想改变标签的内容，可以通过使用 v-once 指令执行一次性地插值，当数据改变时，插值处的内容不会更新。

<span v-once>这个将不会改变: {{ message }}</span>

v-bind 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

一个综合的例子

<div id="app">
   <select @change="changeVal($event)" v-model="selOption">
      <template v-for="(site,index) in sites" :site="site" :index="index" :key="site.id">
         <!-- 索引为 1 的设为默认值，索引值从0 开始-->
         <option v-if = "index == 1" :value="site.name" selected>{{site.name}}</option>
         <option v-else :value="site.name">{{site.name}}</option>
      </template>
   </select>
   <div>您选中了:{{selOption}}</div>
</div>
 
<script>
const app = {
    data() {
        return {
            selOption: "Runoob",
            sites: [
                  {id:1,name:"Google"},
                  {id:2,name:"Runoob"},
                  {id:3,name:"Taobao"},
            ]
         }
        
    },
    methods:{
        changeVal:function(event){
            this.selOption = event.target.value;
            alert("你选中了"+this.selOption);
        }
    }
}
 
Vue.createApp(app).mount('#app')
</script>

Vue组件

自定义组件

局部组件

prop

vue路由加载的两种方式

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

第一种加载方式适合于小型项目，其会加载view视图的全部资源，第二种方式是懒加载，当页面较多时，我们采用这种方式，使得每个页面被调用时加载资源。

Vue3 Ajax

get方法

发送请求的方式也是比较清晰的，在mounted中设置请求方式，url，在then中得到响应数据，在catch中处理错误信息

const app={
    data(){
      return {
          info:'Ajax'
      }  
    },
    mounted(){
        axios
        .get('https://.....')
        .then(response=>(this.info=response))
        .catch(function(error)) {
            console.log(error);
        }
    }
}
Vue.create(app).mount('#app')