vue从入门到开发--3-基础语法

　　一：v-text指令

　　　　指令v-text:可通过该指令绑定动态数据(动态数据我觉得可以是从服务器请求下来的数据，保存在data里边，然后动态显示在文档中，因为是一个一个的组件，数据应该不会很多吧，就只有这一块的数据内容。)

　　

 

　　二：v-if指令

　　　　指令v-if :是否展示当前数据

　　

　　<p v-if=’show’>{{title}}</p> 此时是不显示的。

　　若将show:false 改成 show:true 则title就会在页面中显示。

 

　　三：v-else指令　　

　　　　指令v-else:v-if不执行则v-else执行，二者相反.就跟逻辑里面的if(){}else(){}类似的.

 

　　四：v-for指令

　　　　指令v-for:循环遍历数组对象

　　

　　在页面中就会显示出data里面的所有数据.

 

　　五：v-on指令(指令有很多方法，如鼠标点击或键盘事件等)

　　　　指令v-on:click=”方法名称”; 事件方法,方法内可传参(v-on=click(“hahahaha”));

　　

　　键盘事件:v-on:keyup=””;v-on:keydown=””;键盘发送(点击回车)消息:v-on:keyup.enter=”事件名称”;

 

 　　六：computed

　　　　　computed  计算属性(类似数据双向绑定)

　　　　

　　下方显示的数据会跟着输入的值的变化而变化.跟react和angular类似的都有数据双向绑定。

 

　　七：用户管理小demo练习

　　　　1)结构部分以及数据部分的显示和绑定，实现的用户的添加以及删除以及选中时候的样式切换，因为是本地且没有服务器支持，没有实现数据的保存和删除，仅仅实现的当前状态下的添加和删除操作。

 　　

　　

　　2)：vue-router路由设置

　　到main.js文件，设置路由服务。

　　

 

　　3）导入路由（如果没有这个路由文件，就手动安装一下路由:npm install vue-router --save）,并使用中间件，这些是基础配置。

　　 系统提供的没有"./"路径，自己的文件需要有"./"

 　　4）然后设置当前的路由

 　　

　　model设置history,在浏览器地址栏有文件路径，设置成这样是为了路径的正确，保证 / 到文件正确

　　base:__dirname 当前的路径设置当前的路径

　　routes 里面是数组，数字里面的是对象，对象里面的是path,即组件的路径，设置"/"或"",后面设置component:User,表示这个路径下执行的是User组件,设置"/Test"表示这个路径下的vue组件是component:Test组件。

　　5）接下来对下面的路由进行处理，因为有了路由，就要让路由有一个可承载的载体（即触发这个路由的东西）；

　　

　　router是导入进来的路由；

　　template设置路由载体的地址(es6的语法)　；

　　<router-link to="/">User</router-link>(类似a标签，表示路由到的地址)；
　　<router-link to="/test">Test</router-link>；

　　<router-view></router-view>(触发路由之后执行这个路由视图),这个是必须要的.；

 　　$mount("#app")表示绑定到这个域内.；

 

　　6)：现在运行这个项目 npm run dev

 

 (PS:新手学习，有不对的地方希望大佬们帮忙纠正，万分感谢!)