vue基础入门
vue2基础入门
1、html、css、js基础
2、了解node和npm,开发vue需要node环境,依赖使用npm
3、webpack(可选,因为vue/cli已经封装了打包功能)
【入门知识点】
{{}}表达式
v-bind:绑定属性
v-on:绑定事件
事件修饰符:比如阻止默认行为、冒泡等
@click.stop阻止点击事件的冒泡,@click是v-on:click的简写
使用vue-cli工具创建一个vue项目(node环境)
使用vue创建项目:vue create hello
启动服务器:npm run serve
ES2015语法
import:引入外部模块
export:暴露接口,可以被其他模块调用
.vue单文件里要写exports暴露接口,其他模块才能调用
如:
<script>
export default {
data(){//node环境开发的话是需要data函数来返回数据,如果是引入vue.js,则是data:{ message:"hello vue"}。
return{
message:"hello vue"
}
}
}
</script>
【vue模板语法】
v-if:页面上直接不渲染该标签,
v-show:渲染dom,但设置为display:none;
欢迎你:小米
请登录
<script>
//引入组件
import Hello from "./components/Hello.vue";
export default{
//注册组件
components:{
Hello:Hello,//属性名和属性值相同时候可以简写为Hello,
},
data(){
return{
isLogin:true,
fruits:["香蕉","苹果","粒子"]
}
}
}
</script>
显示列表:v-for
{{fruits}}
//两个参数,名称,索引of 集合,:key绑定属性的唯一性
【组件嵌套】
组件命名:大写字母开头,驼峰命名法
【组件传值】
父级向子级传:使用属性传递
子级传父级:用自定义事件
【计算属性与侦听器】
computed:如果有些值需要计算才能得到,就用计算属性
watch:侦听器
【生命周期钩子】页面加载的时候,主动执行某些程序
created()组件初始化完成
mounted()模板已创建
【插槽、DOM、过滤器】
插槽:
具名插槽:
绑定引用的插槽:
header
【vue获取DOM元素】
window.getComputedStyle(el),ref
export default{
mounted(){
let h1=document.querySelector(".header");//原生方法
let wid=window.getComputedStyle(h1).width;
console.log(width);//输出宽度
let aa=this.$refs.aa;//vue 方法获取DOM元素
let wid=window.getComputedStyle(aa).width;
console.log(width);//输出宽度
}
}
过滤器:通过固定算法重新组织数据
filters:{
split(str){
return str.split("").join();
//拆分字符并重组
}
}
未完待续.............