Vue框架（JavaScript框架）基础笔记

最新推荐文章于 2022-05-12 10:03:54 发布

YANGGEOL

最新推荐文章于 2022-05-12 10:03:54 发布

阅读量140

点赞数

分类专栏：前端文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_46253184/article/details/104760755

版权

前端专栏收录该内容

27 篇文章 2 订阅

订阅专栏

Vue框架的引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

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

 <script>
    var app = new Vue({
      el:"#app",
      data:{
      }
    })
  </script>`

el：挂载点放id，class 标签
data：数据对象可以写复杂的数据类型
Vue实例的作用范围：Vue会管理el选项命中的元素及其内部的后代元素。可以使用其他选择器，但建议适应id选折器。可以使用其他双标签，但不能是HTML和BODY。

V指令以V-开头

v-text 设置标签文本值（textContent）
v-Html 设置innerHtml，如果为网址，会解析为标签
v-on 绑定事件

<div id="yang" >
        <input type="button" value="1" @click="doIt">{{message}}
        <input type="button" value="2" v-on:click="sayHi">
        <input type="button" value="3" @click="lrh(123,345)">
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
   var app = new Vue({
     el:"#yang",
     data:{
         message: 'Vue基础'
     },
     methods:{
         doIt:function(){
             console.log(1223);
         },
         sayHi:function(){
               console.log(123);
         }
         lrh:function(p1,p2){
             console.log(p1);
             console.log(p2);
         }
     },
  })
</script>

v-show 根据表达式真假切换元素的显示和隐藏
v-if 根据真假切换显示隐藏操作DOM
v-bind 设置元素属性（src，title，class）

<div id="yang" >
        <img v-bindz:src="imgsrc" alt="">
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#yang",
            data:{
                imgsrc: "图片地址"
            }
        })
</script>

v-for 根据数据生成列表结构

<div id="app">
        <input type="button" value="添加" @click="add">
        <input type="button" value="删除" @click="remove">

        <ul>
            <li v-for="(it,index) in arr">
                {{ index+1 }}学习网页要学习:{{ it }}
            </li>
        </ul>
        <h2 v-for="item in framework" v-bind:title="item.name">
            {{ item.name }}
        </h2>
 </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:["Html","css","js","vue"],
                framework:[
                    {name:"JQuery"},
                    {name:"swiper"}
                ]
            },
            methods: {
                add:function(){
                    this.framework.push({ name:"php" });
                },
                remove:function(){
                    this.framework.shift();
                }
            },
        })
  </script>

v-model 获取和设置表单元素的值（双向数据绑定）

<div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{ message }}</h2>
</div>

script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"Vue Vue"
            },
            methods: {
                getM:function(){
                    alert(this.message);
                },
                setM:function(){
                    this.message ="jQuery";
                }
            },
        })
 </script>

axios 网络请求库

<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p> {{ joke }}</p>
    </div>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        /*
            接口:随机获取一条笑话
            请求地址:https://autumnfish.cn/api/joke
            请求方法:get
            请求参数:无
            响应内容:随机笑话
        */
        var app = new Vue({
            el:"#app",
            data:{
                joke:"很好笑的笑话"
            },
            methods: {
                getJoke:function(){
                    var that = this;
                    axios.get("https://autumnfish.cn/api/joke").then(function(response){
                        console.log(response.data);
                        that.joke = response.data;
                    },function (err) {  })
                }
            },
        })

    </script>
</body>

axios.get(地址?key=value&key2=values).then(founction(response){},founction(err){})
         //key=value&key2=values  要查询的关键字
axios.post(地址,{key=value&key2=values}).then(founction(response){},founction(err){})

YANGGEOL

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue框架（JavaScript框架）基础笔记

Vue框架的引入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="app"> {{ message }} </div> <script> var app = new Vue({ el:"#app...
复制链接

扫一扫

专栏目录