Vue3基础

Vue3基础

1.创建第一个vue页面

<script src="./js/vue.global.js"></script>  
<!-- 创建一个容器，用来挂载Vue -->
<div id="app">
    <!-- 使用Vue data中的名字及{{}}的方式显示vue中的数据 -->
    {{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>  
<!-- 创建一个容器，用来挂载Vue -->
<div id="app">

    <!-- 通过@click="方法名()的方式将vue中的方法绑定到button中" -->
    <button @click="show_console()">在控制台显示</button>
    <!-- 使用Vue data中的名字及{{}}的方式显示vue中的数据 -->
    {{msg}}{{name}}{{age}}
    <br>
    <!-- 使用{{}}方式只会显示字符串，标签不会生效 -->
    {{html_info}}
    <!-- 使用v-html才能是标签生效 -->
    <span v-html="html_info"></span>
    <br>
    <!-- 使用v-bind:属性名="data()里面的键"-->
    <a v-bind:href="a_herf">跳转到百度</a>
    <!-- v-bind:属性的缩写:属性 -->
    <a :href="a_herf">跳转到百度2</a>
    <br>
    表达式:支持js格式的表达式
    {{1+2}}{{name.split("")}}
    <br>
    表达式:不支持if else这样的判断，只支持3元表达式
    <br>
    {{ok ? "真" :"假"}}
    <br>

    v-if 和 v-else
    <br>
    <span v-if="ok">v-if</span>
    <span v-else-if="ok"> v-else-if</span>
    <span v-else>v-else</span>
    <br>
    <span v-if="score=='A'">90-100</span>
    <span v-else-if="score=='B'">80-90</span>
    <span v-else-if="score=='C'">60-80</span>
    <span v-else>不及格</span>
    {{list}}
    <ul>
        <li v-for="s in list">{{s}}</li>
    </ul>
    <ul>
        <!-- s是course里的元素，第二个值n是索引 -->
        <li v-for="s,n in course">{{s}}{{n}}</li>
    </ul>
    <!-- 双向绑定 ,任意位置的input_value改变，则另外的input_value也会改变-->
    <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>h1</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>