独立构建包括编译和支持 template 选项。 它也依赖于浏览器的接口的存在,所以你不能使用它来为服务器端渲染。 运行时构建不包括模板编译,不支持 template 选项。运行时构建,可以用 render 选项,但它只在单文件组件中起作用,因为单文件组件的模板是在构建时预编译到 render 函数中,运行时构建只有独立构建大小的 30%,只有 16Kb min+gzip 大小。
看了半天,实在没搞清两者之间的区别。经过一番搜索,终于搞清楚了问题的本源,且听我娓娓道来。
Vue.js 的运行过程实际上包含两步。第一步,编译器将字符串模板(template)编译为渲染函数(render),称之为编译过程;第二步,运行时实际调用编译的渲染函数,称之为运行过程。
由于 Vue.js 1.0 的编译过程需要依赖浏览器的 DOM,所以无法
方法/步骤首先,先来讲个小东西吧。我个人一般在开发的时候都会将ESLint关闭掉。在新建一个项目的时候,会提示你安装否。选择n就行了。也就是no。见下图!如果你不心安装了。也没事。在项目的配置文件中找到它注释掉即可。
首先第一步,在components文件夹里新建两个.vue文件。将用它们来路由页面。并且分别取名router1.router2
接下来,我们就开始配置路由了。首先说几个准备思路吧。第一:页面打开后是要有默认显示页的(默认的路由),第二,同时实现路由切换时像JStab切换效果。接下来,我们要在app.vue里写好2个导航命名为router1和router2。分别用来将router2,router1路由进来。(在这之前请把hello.vue的内容清空,才能看到现面第二张图的效果)
现在基本的准备工作已经做好了。现在看到min.js文件。我个人的习惯是喜欢把路由的配置写在这里或者引入到这里。不习惯放在router文件夹下面的index.js。请看下图片。首先将。原始的router引入的改成VueRouter。然后引入之前新建好的两个.vue文件。记得要use一下。最后创建一个router实例。第一个path / 表示的意思是默认路由进来的组件。也就是router1.
到了这里就差最后一步了。回到app.vue。写上路由。分别给router1,router2加上路由标签。router-link标签渲染时会自动增加一个A标签带href路转。后面的to='',就是将要路由到哪里去的min.js中的path路径。to="/"表示此处将路由显示出min.js路由配置中path为/的component。最后,router-view标签是将路由过来的组件渲染在什么地方。这里写在了导航下面。效果请看第二,第三张图片。第二张图片就是默认进来的路由页面。也就是router1.地址栏中的路径就是首页。第三张图地址栏中路径变了,而且内容也变了。说明路由成功。
用v-on指令或者@监听DOM事件,并在触发时运行一些JavaScript代码;
参考:JS,Vue2,介绍,与Vue3区别,MVVM设计模式,模板语法,数据绑定
Vue中的事件修饰符:
1、prevent:阻止默认事件(常用);
2、stop:阻止事件冒泡(常用);
3、once:事件只触发一次(常用);
4、capture:使用事件的捕获模式;
5、self:只有event.target是当前操作的元素时才触发事件;
6、passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
Vue中常用的按键别名:
回车 =>enter、删除 =>delete (捕获“删除”和“退格”键)、退出 =>esc、空格 =>space、换行 =>tab (特殊,必须配合keydown去使用)、上 =>up、下 =>down、左 =>left、右 =>right等。
代码案例
模板内的表达式是非常便利的,用于简单的运算。当其过长或逻辑过于复杂时,会难以维护,因此,当遇到复杂的逻辑时应该使用计算属性,用computed计算属性。
代码案例
通过watch来响应数据的变化。
代码案例
class样式,写法:class="xxx" ,其中xxx可以是字符串、对象、数组。
1、字符串写法适用于:类名不确定,要动态获取。
2、对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。
3、数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。
style样式,写法::style="{fontSize: xxx}",其中xxx是动态值;:style="[a,b]"其中a、b是样式对象。
代码案例