HTML文件引入Vue开发

HTML文件引入Vue开发

    
    
    
    





    

        

            
{{text}}
            
        
        

            
{{item.text}}
            
        
    

点击事件 @click

{{text}}

添加文本使用两个大括号｛｛文本｝｝

img标签中src前面得加冒号

new Vue({
        el: "#Vue",
        data: {
            text: "hallo,word",
            img: "",
            arr: []
        },
        methods: {
            click() {
                console.log(1111)
            }
        },
        created() {
            let that = this
            $.ajax({
                type: "get",	//请求方式
                async: false,
                url: "__CONTROLLER__/gettesttos",
                data: {},		//传值给后台
                dataType: "json",
                success: function (res) {
                    console.log(res.info.data)
                    that.text = res.info.text
                    that.img = res.info.img
                    that.arr = res.info.data
                },
            });
        }
    })

data中定义需要使用的数据

data: {
            text: "hallo,word",
            img: "",
            arr: []
        },

在methods中写入点击事件

 methods: {
            click() {
                console.log(1111)
            }
        },

请求接口后进行渲染

        created() {
            let that = this  //定义一个that
            $.ajax({
                type: "get",	//请求方式
                async: false,
                url: "__CONTROLLER__/gettesttos",
                data: {},		//传值给后台
                dataType: "json",
                success: function (res) {
                    console.log(res.info.data)  
                    that.text = res.info.text
                    that.img = res.info.img
                    that.arr = res.info.data
                },
            });
        }

for循环渲染要用v-for
item是自己定义的值

        

            
{{item.text}}
            
        

arr是需要循环的数组名字