vue学习基础（1）

最新推荐文章于 2024-08-02 00:33:58 发布

Study_Live_Sun

最新推荐文章于 2024-08-02 00:33:58 发布

阅读量466

点赞数 1

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

本文链接：https://blog.csdn.net/Study_Live_Sun/article/details/104157844

版权

vue 同时被 2 个专栏收录

24 篇文章 2 订阅

订阅专栏

前端

23 篇文章 0 订阅

订阅专栏

1、使用vscode编辑器需要安装live server（热更新）和 vetur（vue关键字高亮）插件，配置setting如下，对所写的代码进行格式化

{
    "editor.formatOnType":true,
    "editor.formatOnSave":true
}

2、el和data的使用

3、methods方法，使用es6的表达形式

methods:{
        test1(time){
            return `这是es6de${this.message}、${time}`
        }
    },

4、v-bind属性绑定

5、VueCli3.x小白入门-v-on事件绑定

6、VueCli3.x小白入门-事件修饰符

7、VueCli3.x小白入门-键盘事件

8、VueCli3.x小白入门-v-model

预期：随表单控件类型不同而不同。
限制：
- <input>
- <select>
- <textarea>
- components
修饰符：
- .lazy - 取代 input 监听 change 事件
- .number - 输入字符串转为有效的数字
- .trim - 输入首尾空格过滤

9、VueCli3.x小白入门-ref的使用，类似dom

methods:{
        test1(){
           this.age = this.$refs.name.value;
        }
    },

10、VueCli3.x小白入门-watch的使用

比较消耗资源，减少使用，如a属性值发生变化，addToA()方法和addToB()方法都会调用

11、VueCli3.x小白入门-computed，只有在发生变化时才会调用

推荐使用，如检索、css样式绑定

如属性a发生变化，只会调用addToA方法

12、VueCli3.x小白入门-动态绑定css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>vue cdn 基础</title>
</head>
<style>
    .change_color{
        background-color: red;
    }
    .change_length:after{
        content: "haha";
        color: #42b983;
    }
</style>
<body>
<div id="vue-app">
    <h1>动态绑定样式，两种方式</h1>
    <!--示例1 属性绑定-->
    <span :class="{change_color:changeC}" @click="changeC = !changeC">改变颜色</span>
    <!--使用计算属性-->
    <span :class="changeCC">hello</span>
</div>
</body>
<script src="app.js"></script>

</html>

var app = new Vue({
    el:'#vue-app',
    data:{
        changeC:true,
        message:'ddddddd'
    },
    methods:{
        test1(){
           this.age = this.$refs.name.value;
        }
    },
    computed:{
        changeCC(){
            return {change_color:this.changeC,change_length:true}
        }
    },
});

13、VueCli3.x小白入门-if和show指令

14、VueCli3.x小白入门-v-for指令

<div id="vue-app">
    <!--遍历数组-->
    <ul v-for="(user,index) in users">
        <li>{{index}}:{{user.id}},{{user.name}}</li>
    </ul>
    <!--遍历对象-->
    <div v-for="(val,key) in oneUser">
        <p>{{val}}-{{key}}</p>
    </div>
</div>

var app = new Vue({
    el:'#vue-app',
    data:{
        users:[
            {id:1,name:'name1'},
            {id:2,name:'vfnvjf'},
            {id:3,name:'mkmd'},
            {id:4,name:'swsw'},
            {id:5,name:'vfnjv'},
        ],
        oneUser:{key:122,name:"ncjdncd",sex:'true'}
    },
    methods:{
    },
    computed:{

    },
});

15、Vue2.x-实战DEMO----敲破瓶子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>vue cdn 基础</title>
</head>
<style>
.progess-bar{
    height: 20px;
    width: 200px;
    border: 1px solid black;
}
    .progess-bar-inner{
        background-color: red;
        height: 20px;

    }
</style>
<body>
<div id="vue-app">
    <div>
        <img :src="imgsrc"/>
    </div>
    <div class="progess-bar">
        <div class="progess-bar-inner" :style="widthbar"></div>
    </div>
    <button @click="qiaoda()" v-show="width>0">敲打</button>
    <button @click="huifu()" v-show="width<=0">重置</button>
</div>
</body>
<script src="app.js"></script>

</html>

var app = new Vue({
    el:'#vue-app',
    data:{
        width:100,
        widthbar:{width:'100%'},
        imgsrc:'images/pingzi1.png'
    },
    methods:{
        qiaoda(){
            if(this.width>0){
                this.width = this.width - 10;
                this.widthbar.width = this.width+"%";
            }
            if(this.width<=0){
                this.imgsrc = 'images/pingzi2.png';
            }

        },
        huifu(){
            this.width = 100;
            this.widthbar.width = this.width+"%";
            this.imgsrc = 'images/pingzi1.png';
        }
    },
    computed:{

    },
});

16、多个vue实例

var appone = new Vue({
    el:'#vue-app-one',
    data:{
        title:'one'
    },
    methods:{
    },
    computed:{

    },
});
var apptwo = new Vue({
    el:'#vue-app-two',
    data:{

    },
    methods:{
        changeOne(){
            appone.tilte = "这是one的title"
        }
    },
    computed:{

    },
});

17、VueCli3.x小白入门-注册全局组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>vue cdn 基础</title>
</head>
<style>

</style>
<body>
<div id="vue-app-one">
    <Greeting/>
</div>
<div id="vue-app-two">
    <Greeting/>
</div>
</body>
<script src="app.js"></script>

</html>

//全局组件
Vue.component("Greeting",{
    template: `<div>
        这是Greeting组件的内容，全局组件--{{name}}
        <button @click="changeName">改变名字</button>
        </div>
    `,
    data(){
        return {
            name:'cdcd'
        }
    },
    methods:{
        changeName(){
            this.name = "改变了"
        }
    }
});
var appone = new Vue({
    el:'#vue-app-one',
    data:{
        title:'one'
    },
    methods:{
    },
    computed:{

    },
});
var apptwo = new Vue({
    el:'#vue-app-two',
    data:{

    },
    methods:{
        changeOne(){
            appone.title = "这是one的title";
        }
    },
    computed:{

    },
});

18、VueCli3.x小白入门-FETCH请求，es6最新请求API方法

19、VueCli3.x小白入门-Axios请求

npm install axios
或
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

mounted(){
        axios.get('http://jsonplaceholder.ttypicode.com/todos').then(res=>{
            this.todos = res.data;
        });
    }

Study_Live_Sun

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录