Vue安装

Vue学习记录

创建一个vue应用

​

//1.创建应用
	vue init webpack myProject
//2.选择yes/no
//3.进入项目
	cd myProject
//4.运行命令
	cnpm run dev
//5.如果报错
	npm install webpack-dev-server --save-dev
//6.安装element -ui
	cnpm i element-ui -S
//7.在main.js中引入element组件	
	/*引入如下组件*/
	import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';
	Vue.use(ElementUI);
//可以使用

调用函数

{{ fun() }

路由跳转

<script>
export default {

    methods:{
    toLoginPage(){
        this.$router.push("/login")
    }
    },
    mounted(){
        this.getOrderList();
    } 
}
</script>

3.computed阶段

Vue在computed阶段会执行一次，也就是页面首次加载时。

    data(){
        return{
            orders:[]
        }
    },
    computed:{
        getToken(){
            return this.$store.state.token
        }
    },

4.Vue发送请求结构

Get
export const getRequest = (参数值)=>service.get("请求名",{
    params:{ 
    参数名：参数值
    }
})
Post
export const registerApi =(参数)=>service.post("/api/v1/pri/user/register",{
    "phone" :phone,"pwd":pwd,"name":name
})

5.vue内嵌html

 <iframe :src='html地址' ></iframe>

1.搜索功能

搜索功能和首页展示的文章数据使用同一个接口，搜索的数据传给模板渲染即可

2.无限滚动加载

添加addEventListener('mousewheel',回调函数);当达到条件时，在回调函数进行逻辑判断。

3.ref

是像父组件的$ref中注册声明子组件引用，可以调用子组件的方法