前端|转前端的第一天 javascript|html5|vue.js

转前端的第一天国庆好无聊呀，莫事干只好敲一敲代码，原计划跟朋友准备去看panda，想了想两个人会不会很尴尬，还是等人多起来再去吧。
1.准备工作准备好环境
1.nodejs
2.vue/cli
使用powershell创建一个vue项目

cd + 项目存放路径 vue create + 项目名

文章图片

出现以上问题不要慌张
输入以下命令，修改其执行策略。

set-ExecutionPolicy RemoteSigned

文章图片

文章图片

根据提示创建好项目后，进入到项目目录，把项目先跑起来

npm run serve

文章图片

访问本地8080后显示如下，就说明项目成功启动

文章图片

2.基本语法以引入script文件为例来说，首先第一步，创建一个html文件，需要导入vue的js文件,官网上快速开始的样例如下：

="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">

完整是这样的

src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> Vue基础 - 锐客网 { { message }} { { myMessage.name }} { {girlFriends[0]}} 打招呼打招呼{ {message}} > var app = new Vue({// #是id选择器，设置挂载点 el:"#app", data:{message:"hello Vue!", myMessage:{name:"yokna", mobile:"181xxxxxxxx" }, girlFriends:["girl1","girl2","girl3"] }, methods:{doIt:function(){alert("ahahaha"); } }, })

script中创建一个vue实例，然后通过id选择器选择需要挂载的dom元素上，data中写待用的数据，这样就可以将数据渲染出来。

v-text:将字符内容绑定到标签上
v-html:将html内容绑定到标签上，并且自动解析成html标签
v-on：为元素绑定一个事件，可以替代成@

v-show:设置一个组件是否显示，一般来说与data中的数据配合使用
v-if:根据表达式的真假值，来切换元素的显示与隐藏
v-bind:设置元素的属性，也可以用:来代替

文章图片文章图片 var app3 = new Vue({ el:"#app3", data:{ age:17, imgSrc:"img.jpg", imgTitle:"中秋快乐", isShow:true }, methods:{ changeIsShow:function(){ this.isShow = !this.isShow; } } })

【前端|转前端的第一天】v-for:根据数据生成列表结构
v-on自定义参数以及事件修饰符
v-model:双向数据绑定

{ {index+1}} { {item.name}} > var app = new Vue({el:"#app", data:{arr:[1,2,3,4,5], food:[ { name:"rice"}, { name:"egg"} ] } })

{ {message}}> var app = new Vue({el:"#app", data:{message:"nihao", arr:[1,2,3,4,5], food:[ { name:"rice"}, { name:"egg"} ] }, methods:{getM:function(){alert("M function is running!") }, setM:function(){this.message = "setM"; } } })

今天是学起Vue的第一天，hac无聊学学。