PHP试题网_免费网络PHP试题测试平台,PHP试卷调查,PHP试卷模板、PHP考试测验
公告: 【20201211】公告:复杂试卷成功上线,问答模块很快上线……网站将有诸多变化

1. Vue.js:是国内开发者尤雨溪开发的js框架,它是实现UI层的渐进式框架, Vue借鉴了Angular的指令、React中组件和props等优点进行设计,从最简单的数据处理,到数据交互,到DOM操作,到路由处理等,VueJS都有完整的解决方案。

 

2. 两种开发模式

    (1). 直接引入vue.js文件即可

    (2). vue-cli

        ①. 确保电脑上装有NodeJS 4.0以上的版本,在CMD里面运行node –v查看版本

        ②. 全局安装 vue-cl

在命令行输入:$ npm install --global vue-cli,全局安装vue-cli

默认是从国外服务器下,可以使用阿里巴巴在国内的镜像服务器,通过config命令设置默认下载路径:npm config set registry https://registry.npm.taobao.org 

然后再执行:npm install --global vue-cli,这样安装的速度会快一些,完成后,检查是否安装成功:vue -V (在此注意V为大写)

        ③. 创建一个基于 webpack 模板的新项目(名为my-project)

在命令行输入:vue init webpack my-project,注意项目名不能有大写

项目建立过程中,有如下选择,选择NO,该选项为使用ESLint规范你的代码,一个空格错误都将报错,不开启,避免不必要的麻烦,后两项为单元测试,可以选择No

项目建立完成后,目录结构如下:

    ④. 安装依赖

A. cd my-project 进入项目中

B. npm install 安装依赖文件

完成后,会发现项目目录下多出一个node_modules文件夹,里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目,进入项目目录文件夹(my-project)中,就可以使用vue进行开发啦

C. npm run dev,便可以打开本地服务器实时查看效果(localhost:8080)

如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config>index.js

建议将端口号改为不常用的端口,另外我还将 build 的路径前缀修改为 ' ./ '(原本为 ' / '),是因为打包之后,外部引入 js 和 css 文件时,如果路径以 ' / ' 开头,在本地是无法找到对应文件的(服务器上没问题),所以如果需要在本地打开打包后的文件,就得修改文件路径

npm run dev后的初始效果

退出监听,可以直接Ctrl+C,选择Y

 

3. Vue常用的属性

(1). el  作用域(一般为顶层容器的id)

(2). data  绑定的数据

(3). props 接收父组件传递的参数

(4). methods  方法

(5). components 组件

(6). directives 自定义指令

(7). filters 过滤属性

(8). computed 计算属性

(9). watch  监听属性

(10). 生命周期属性

①. beforeCreate 创建前

②. created  创建后 (常用于发起数据请求)

③. beforeMount 挂载前

④. mounted挂载后 (常用于发起数据请求)

⑤. beforeUpdate 更新前

⑥. updated 更新后

⑦. beforeDestroy 摧毁前

⑧. destroyed 摧毁后

 

4. Vue常用的指令

(1). 条件判断指令

A. v-if   条件成立时挂载并显示

B. v-else-if  紧跟v-if之后 , v-if不成立时,判断当前选项是否满足条件与显示

C. v-else   紧跟v-if或v-else-if之后,前面的条件不成立时,挂载并显示

最终解析如下:

(2). v-for  循环指令 , 循环遍历当前选项所对应的数组或是对象

最终解析如下:

(3). v-show  显示指令,根据条件判断当前选项在DOM树上显示还是隐藏

最终解析如下:

(4). v-bind  绑定属性,缩写的形式: v-bind:src可以写成 :src

在vue中 绑定html属性,必须使用v-bind

最终解析如下:

v-bind的属生可以和标签原有的属性同时存在

可以直接绑定一个数组

可以在绑定的数组中添加对象

(5). v-model  双向数据绑定,此命令绑定的变量的值改变时,其他地方渲染这个变量的值也会同步发生改变。

①. v-model. lazy   延迟(确认后)更新

②. v-model. number   自动将用户的输入值转为 Number 类型

③. v-model. trim  自动过滤用户输入的首尾空格

当input输入框在输入时,所对应的p标签里的值也会发生改变,最终解析如下:

(6). v-on  绑定事件,缩写形式:v-on:click可以写成@click

①. v-on:click=" "  单击事件

②. v-on:click.once=" " 只可点击一次

③. v-on:click.top=" " 阻止事件冒泡

④. v-on:click.prevent=" " 阻止默认事件

⑤. v-on:dblclick=" " 双击事件

⑥. v-on:keydown.enter=" " 键盘按下事件,只对指定的按键号有效

⑦. v-on:keyup.13=" " 键盘弹起事件,只对指定的按键号有效

(7)v-text 将内容按文本解析

最终,页面的内容会按如下方式去渲染

(8)v-html 将内容按html解析

最终,页面的内容会按如下方式去渲染

作者:OK兄 浏览次数:1