vue入门

最新推荐文章于 2023-04-02 11:15:07 发布

weixin_38892128

最新推荐文章于 2023-04-02 11:15:07 发布

阅读量56

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_38892128/article/details/113731738

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

练习文件

<html>
    <div id="app">
            content
            <p>{{message}}</p>
            <p id="p1"></p>

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

    <script>

        const app = new Vue({
            el:"#app",
            data:{
                message:"hello",

            }
        })
    </script>

</html>

计算属性

            <h2>{{fullname}}</h2>

            computed:{
                fullname:function(){
                    return this.first + ' ' + this.last;
                }
            },

创建vue项目

1. 下载vue
2. 下载nodejs
3. npm install -g cnpm --registry=https://registry.npm.taobao.org
4. cnpm install --global vue-cli
5. vue init webpack my-project
6.  cd my-project
7. npm install
8. npm run dev

vue指令

v-on 绑定事件
v-on:click="add_list"
@click="delete_list"

v-for 循环
v-for="(item,index) in list"

v-model 双向绑定值
<input type="text" name="" id="" v-model="inputValue" >

<script>
export default {
  data () {
    return {
      inputValue:"",
    }

  },
}
</script>


v-show, v-if 控制元素是否显示
<footer v-show="list.length != 0" ></footer >

axios 网络请求

安装axios
然后在main.js文件中引入
import axios from 'axios'
 Vue.prototype.$axios = axios;

然后就可以this.$axios来使用了
    get_req:function(){
      this.$axios.get("https://autumnfish.cn/api/joke/list?num=6")
  .then(function(response) {
    console.log(response);
  })

axios的get和post

    postMethod:function(){
      this.$axios.post('https://autumnfish.cn/api/user/reg33',{username:'ali'}
      ).then(function(response){
        console.log(response);
      }).catch(function(error){
        console.log(error);
      })
    },

this在axios里面的指向和外面的的指向不一样，里面的指向了undefined，解决方法1：let that=this

    get_req:function(){
      let that = this;
      console.log(this.info);
      this.$axios.get("https://autumnfish.cn/api/joke/list?num=6")
  .then(function(response) {
    console.log(response);
    that.info=response;
    console.log(this.info);
  })
}

解决方法二：箭头函数

    get_req:function(){
      console.log("first:"+this.info);
      this.$axios.get("https://autumnfish.cn/api/joke/list33?num=6")
  .then((response)=>{
    console.log(response);
    console.log("second:"+this.info);
  }).catch((error)=>{
    console.log(error);
  })
},

组件
全局组件


<html>
    <div id="app">
        <!--使用组件 -->
        <my-cpn></my-cpn>
        <my-cpn></my-cpn>
        <my-cpn></my-cpn>
      
    </div>
    <script src="../js/vue.js"></script>

    <script>
        // 创建组件
        const cpn = Vue.extend({
            template:`
            <div>
                <h1>header1</h1>
                <h2>header2</h2>
            </div>
            
            `
        })
        // 注册组件
        Vue.component('my-cpn',cpn);

        const app = new Vue({
            el:'#app'
        })

    </script>

</html>

局部组件（常用）

<html>
    <div id="app">
        <!--使用组件 -->
        <mycpn></mycpn>
        <mycpn></mycpn>
        <mycpn></mycpn>
      
    </div>
    <script src="../js/vue.js"></script>

    <script>
        // 创建组件
        const cpn = Vue.extend({
            template:`
            <div>
                <h1>header1</h1>
                <h2>header2</h2>
            </div>
            
            `
        })
        // 注册组件
        //Vue.component('my-cpn',cpn);

        const app = new Vue({
            el:'#app',
            data:{
                message:'hh',
            },
            components:{
                mycpn:cpn,
            }
        })

    </script>

</html>

weixin_38892128

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue入门

创建vue项目1. 下载vue2. 下载nodejs3. npm install -g cnpm --registry=https://registry.npm.taobao.org4. cnpm install --global vue-cli5. vue init webpack my-project6. cd my-project7. npm install8. npm run devvue指令v-on 绑定事件v-on:click="add_list"@click="de
复制链接

扫一扫