Vue3基础

Vue3基础

1.创建第一个vue页面

<script src="./js/vue.global.js">script>  

<div id="app">
    
    {{msg}}
div>
<script>
    //创建一个Vue应用
    const app = Vue.createApp({
        //存储数据
        data(){
            //data相当于一个方法，要想数据能显示在页面中必须使用return
            return{
                //具体的数据，采用键值对的方式，值可以是任何类型，字符串，整型，json对象
                msg:"hello vue"
            }
        }
        //mount表示挂载到id为app的容器汇总
    }).mount("#app")
script>

2.Vue基础

<script src="./js/vue.global.js">script>  

<div id="app">

    
    <button @click="show_console()">在控制台显示button>
    
    {{msg}}{{name}}{{age}}
    <br>
    
    {{html_info}}
    
    <span v-html="html_info">span>
    <br>
    
    <a v-bind:href="a_herf">跳转到百度a>
    
    <a :href="a_herf">跳转到百度2a>
    <br>
    表达式:支持js格式的表达式
    {{1+2}}{{name.split("")}}
    <br>
    表达式:不支持if else这样的判断，只支持3元表达式
    <br>
    {{ok ? "真" :"假"}}
    <br>

    v-if 和 v-else
    <br>
    <span v-if="ok">v-ifspan>
    <span v-else-if="ok"> v-else-ifspan>
    <span v-else>v-elsespan>
    <br>
    <span v-if="score=='A'">90-100span>
    <span v-else-if="score=='B'">80-90span>
    <span v-else-if="score=='C'">60-80span>
    <span v-else>不及格span>
    {{list}}
    <ul>
        <li v-for="s in list">{{s}}li>
    ul>
    <ul>
        
        <li v-for="s,n in course">{{s}}{{n}}li>
    ul>
    
    <input type="text" v-model="input_value">
    <br>
    {{input_value}}
div>
<script>
    //创建一个Vue应用
    const app = Vue.createApp({
        //存储数据
        data(){
            //data相当于一个方法，要想数据能显示在页面中必须使用return
            return{
                //具体的数据，采用键值对的方式，值可以是任何类型，字符串，整型，json对象
                msg:"hello vue"
                ,name:"张三"
                ,age:20
                ,html_info:"
h1
"
                ,a_herf:"http://www.baidu.com"
                ,ok:true
                ,score:"avrhghj"
                ,list:[1,2,3,4,5,6]
                ,course:["语文","数学","英语"]
                ,input_value:"x"
            }
        }
        //methods用来定义方法
        ,methods:{
            //show_console就是一个方法，他它通过方法名在页面中被调用
            show_console(){
                //在控制台打印123
                console.log(123);
            }
        }
        //mount表示挂载到id为app的容器汇总
    }).mount("#app")
script>

3.axios案例

<script src="./js/vue.global.js">script>
<script src="./js/axios.min.js">script><div id="app">{{msg}}div>
<script>
    //在Vue中使用axios
    const app = Vue.createApp({
        data() {
            return {
                msg: "msg"
            }
        }
        , mounted() {
            axios.get("./json/data1.json")
                .then(response => {
                //想要执行的操作
                console.log(response.data);
            })
                .catch({
                //失败时候的操作
            })
        }
    }).mount("#app")
    //单独使用axios
    axios.get("./json/data1.json")
        .then(response => {
        //想要执行的操作
        console.log(response.data);
    })
        .catch({
        //失败时候的操作
    })
script>