Vue学习记录

Vue入门学习记录

一、Vue实例

Vue实例一般都会有下面三部分：

el，挂载点，表示vue实例的作用范围，一般是挂在最外围标签上。
data，数据，我们可以定义各种数据，以供页面使用
methods，定义方法

没错，他们所有定义都是使用key:value的js对象形式

然后，还有一个是computed 计算属性，

computed也是用来定义方法的，表面是定义的方法，实际上是一个属性

使用：computed计算属性尽管是定义的方法，但它是一个属性，不能加括号（）

另外：computed采用了虚拟dom缓存，简单说可以把computed看成缓存

只有值修改后，才会再次执行方法，否则使用已缓存的值

<div id="app">
    
</div>
<script type="text/javascript">
    var app=new Vue({
        el:"#app",
        data:{
            slogan:"让时间变成力量",

        },
        methods:{
            currentTime1:function(){
                return Date.now();
            }
        },
        computed:{
            currentTime2:function(){
                return Date.now();
            }
        }
    })
</script>

二、基础指令

v-text 设置文本，页就是innerText

<div v-text="">让时间变成力量</div>
<!--等价于-->
<div >让时间变成力量</div>

v-html 设置元素的innerHTML

<div v-html="<a>让时间变成力量</a>"></div>
<!--等价于-->
<div ><a>让时间变成力量</a></div>

v-bind 绑定元素的属性，使用这个能使用Vue实例参数

<a v-bind:title="slogan">让时间变成力量</a>
<!--简写:-->
<a :title="slogan">让时间变成力量</a>

v-on 事件绑定

<div v-on:click="">让时间变成力量</div>
<!--等价于-->
<div @click="">让时间变成力量</div>

v-for 循环一个元素

语法1：v-for="item in items"，items是vue实例的data数据

语法2：v-for="(item,index) in items"

<!--假设vue实例如下-->
<script>
    var app=new Vue({
        el:"#app",
        data:{
            items:["java","javase","javaweb"]
        }
    })
</script>
<ul id="app">
    <li v-for="item in items" v-text="item"></li>
</ul>
<!--等价于-->
<ul id="app">
    <li  v-text="items[0]"></li>
    <li  v-text="items[1]"></li>
    <li  v-text="items[2]"></li>
</ul>

v-show，v-if

这两个指令都是通过boolean值，来绝对元素是否隐藏

一般值都是vue实例设立的变量，通过方法去修改变量以达到是否隐藏的效果

v-show操作样式 display

v-if 当逻辑为false时，直接注释了该元素

使用v-show，元素还在，只是看不见。元素频繁修改，建议使用v-show

使用v-if，元素已经不在。元素不频繁修改，建议使用v-show
```
<div v-show="false" v-text="让时间变成力量"></div>
<div v-if="false" v-text="让时间变成力量"></div>


<div v-show="false" v-text="让时间变成力量"></div>

<div style="display:none" v-text="让时间变成力量"></div>

<div v-if="false" v-text="让时间变成力量"></div>


```

v-model 元素value和vue实例数据双向绑定，页面上修改<=>vue实例数据修改

表单上使用最明显

<!--假设vue实例如下-->
<script>
    var app=new Vue({
        el:"#app",
        data:{
            slogan:"让时间变成力量"
        }
    })
</script>
<div id="app">
    <input type="text" v-model="slogan"/>
    <div v-text="slogan"></div>
</div>

三、axios

其中一种语法：

this.axios.get(url?k1=v1&k2=v2).then(function(response){},function(err){})
this.axios.get(url,{k1:v1,k2:v2}).then(function(response){},function(err){})

另一种：

this.axios({
    method:'post',
    url:""
}).then(function(response){},function(err){})

四、vue-cli脚手架创建项目

这里查看我的另一个文档，讲得很详细：https://www.cnblogs.com/powerfulTime/articles/15688754.html

提示：以下我就简写了，具体配置需要穿插项目的多个文件，下面只做个人学习记录

五、vue-router路由

下载路由

这个下载命令只能在当前项目中使用，当前项目中才会有vue-router的包。

该命令要在系统管理员的权限下运行，不然命令会被拒绝

#--save 表示安装vue-router ,并将依赖配置写在package.json的dependencies中，package.json就相当于maven的pom.xml
#--save-dev 表示安装vue-router ,并将依赖配置写在package.json的devDependencies中,开发环境依赖
npm install vue-router --save-dev

创建router文件

创建一个包router，在里面创建一个index.js文件

import VueRouter from 'vue-router'
import Vue from "vue";
import content from "../components/Content"
import main from '../components/Main'

//vue-router需要显示声明使用
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes:[
    {
      //路由路径
      path:"/content",
      //跳转的组件
      component:content
    },
    {
      //路由路径
      path:"/main",
      //跳转的组件
      component:main
    }
  ]
})

使用

main.js导入之前的index.js的router,我们只需要导入包就能自动扫描index.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from "./router" //自动扫描router包的路由配置
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

六、vue+element

安装

main.js配置

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI)

new Vue({
  el: '#app',
  render: h => h(App)
})

不写了，感觉自己这个半吊子，以后还要重新系统学一次

posted @ 2021-12-14 22:13 让时间变成力量阅读(48) 评论(0) 收藏举报

刷新页面返回顶部

让时间变成力量