创意产品网站,优质的网站制作,wordpress留言发送邮件,网站怎么推广Vue中的渲染方式总结可分四种:原有模板语法#xff0c;挂载渲染使用render属性#xff0c;createElement函数直接渲染使用render属性#xff0c;配合组件的template属性#xff0c;createElement函数渲染使用render属性#xff0c;配合单文件组件#xff0c;createElemen…Vue中的渲染方式总结可分四种:原有模板语法挂载渲染使用render属性createElement函数直接渲染使用render属性配合组件的template属性createElement函数渲染使用render属性配合单文件组件createElement函数渲染方式一原有模板语法挂载渲染就是对使用Vue标签语法的hmtl进行渲染。实例代码如下!DOCTYPE html
html langen
headmeta charsetUTF-8titleTestVue/title
/head
body
div idappinput v-modelmessagepMessage is: {{ message }}/p
/div
/body
script srcjs/vue.js/script
script typetext/javascriptvar v new Vue({el: #app,data: {message: 这是内容}});
/script
/html
特点当页面返回时html中的v-model等属性并没有被渲染保持不变发给客户端客户端直到加载了Vue创建了实例之后才会将这些标识渲染出来。v-if显示后消失或消失后显示造成跳变这种方式的缺点是明显的浏览器第一时间无法识别这些标识这会使得在某些情况下出现奇怪的现象下面我修改代码以做演示!DOCTYPE html
html langen
headmeta charsetUTF-8titleTestVue/title
/head
body
div idapptemplate v-iftype 1div stylewidth: 400px;height: 300px;background-color: blue;/div/templatediv stylewidth: 400px;height: 200px;background-color: red;/div
/div
/body
script srcjs/vue.js/script
script typetext/javascriptvar v new Vue({el: #app,data: {type: 1}});
/script
/html
可以看到上面的第一个div在type为1时应该显示但是它在页面初始加载是不会显示的一个html并没有template标签整个标签会被跳过那么这个页面展示的结果就会有一个一瞬间的跳变。这个过程非常短但是人眼是绝对识别得到的在谷歌浏览器下使用CtrlShiftR360浏览器下使用CtrlF5强制不使用缓存加载页面我们就能看到这个跳变了注意另一种写法也会有跳变情况!DOCTYPE html
html langen
headmeta charsetUTF-8titleTestVue/title
/head
body
div idappdiv v-iftype 1 stylewidth: 400px;height: 300px;background-color: blue;/divdiv stylewidth: 400px;height: 200px;background-color: red;/div
/div
/body
script srcjs/vue.js/script
script typetext/javascriptvar v new Vue({el: #app,data: {type: 2}});
/script
/html
解释div默认不会识别v-if默认显示但是tpye为2Vue加载后隐藏了该div造成跳变。如何解决跳变问题使用下面所有方法都可以解决思路是用render函数进行渲染而目标div内不含任何内容也就是先什么都不显示然后渲染出来正确的html自然不会有跳变。方式二使用render属性createElement函数直接渲染原本无html通过JavaScript 的完全编程的能力生成页面。实例代码如下!DOCTYPE html
html langen
headmeta charsetUTF-8titleTestVue/title
/head
body
div idapp
/div
/body
script srcjs/vue.js/script
script typetext/javascriptvar v new Vue({el: #app,data: {message: 这是内容},render: function (createElement) {return createElement(p, Message is: this.message)}});
/script
/html
这里目标div内初始时没有任何内容使用render方法生成内容这里我没有渲染出v-model的效果因为实现起来比较复杂要用到组件具体参考官网渲染函数 JSXVue 的模板实际是就是被编译成了 render 函数。这里render不要使用ECMAScript6语法如下render: h h(p, this.message)
因为在ECMAScript6语法中这里的this会指向[object Window]这个this.message是获取不到值的而在上面一个的例子中this会指向当前Vue实例。特点极少会使用的方式只适合一些细节渲染虽完全控制输出但不够直观实现复杂远不及模板标记语法让Vue去帮我们编译渲染。方式三使用render属性配合组件的template属性createElement函数渲染。相比于上一个方式加入组件利用template属性更为直观同样是原本无html通过render函数渲染。实例代码!DOCTYPE html
html langen
headmeta charsetUTF-8titleTestVue/title
/head
body
div idapp
/div
/body
script srcjs/vue.js/script
script typetext/javascriptvar MyComponent {data () {return {message: 这是内容}},template: div idappinput v-modelmessagepMessage is: {{ message }}/p/div};var v new Vue({el: #app,components: {my-component: MyComponent},render: function (createElement) {return createElement(my-component)}//ECMAScript6: render: h h(my-component)});
/script
/html
这里渲染组件时的渲染的内容会覆盖原div idapp/div而不是在其之下生成子节点。特点动态渲染并且通过组件实现了模块分离但是html模板被包在里使用不方便IDE无法高亮代码不适合大型项目。下面是官网上对于这种方式的描述全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复上面我用的是局部注册组件甚至组件和实例不能分文件字符串模板 (String templates) 缺乏语法高亮在 HTML 有多行的时候需要用到丑陋的 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时CSS 明显被遗漏没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器如 Pug (formerly Jade) 和 Babel方式四 说了前三种方式其实只是一步步引出第四种方式使用render属性配合单文件组件createElement函数渲染。这种方式是绝大部分Vue项目官方脚手架就是采用该渲染方式的渲染方式。在理解这一部分内容之前你需要有webpack、vue-loader的知识1、webpack是核心将组件文件打包配合loader解析文件。2、vue-loader是vue单文件组件的核心负责解析.vue文件。webpack以及loaderwebpack一种打包文件工具配合一些插件可以模块化文件的打包处理等我也是边学边做自行百度了解。loaderwebpack非常常用的属性让你能配合各种loader随意加载各种东西看下官网给出的解释loader 用于对模块的源代码进行转换。loader 可以使你在 import 或加载模块时预处理文件。因此loader 类似于其他构建工具中“任务(task)”并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言如 TypeScript转换为 JavaScript或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件比如这里我们有.vue模块组件我们要在另一个文件中import App from ./App.vue该如何做到我一步步讲。实现步骤我是使用命令的方式先打包出一个目标文件再运行服务器好像可以写到package.json的scripts字段里做一个步骤的简化我没试还是最简单的方式吧。1、我是用命令行打包所以先全局安装webpack注意webpack4.0版本后要附带安装一个webpack-cli或是webpack-command其中之一我是安的webpack-commandnpm install webpack webpack-command -g2、因为babel-loader、vue-loader等必须要有webpack好像不在项目中载入webpack也不行所以进入项目根目录node_modules文件夹所在目录npm install webpack --save在项目中加载webpack。3、接着再把需要的loader加载一下首先是vue-loader是解析.vue文件的核心loader接着是babel-loader它是用来修改不兼容的javaScript语法的loader用来处理.vue文件中的script/script还有处理style/style的css-loader、vue-style-loader还有vue-loader强制附带个vue-template-compiler我不知道是干嘛的。加载babelnpm install babel-loader babel-core babel-preset-env --save加载其他必要的npm install vue-loader css-loader vue-style-loader vue-template-compiler --save4、在根目录下新建一个名为dist的文件夹存放生成的文件。5、在根目录下新建文件App.vue这就是单文件组件了而且是根组件添加代码如下templatediv idappinput v-modelmessagepMessage is: {{ message }}/p/div
/templatescript
export default {data () {return {message: dsdsadasad}}
}
/script
6、在根目录下新建webpack打包入口文件entry-client.js添加代码如下import Vue from vue //注意在静态编译时全都使用import不要使用require无法生效
import App from ./App //注意在静态编译时全都使用import不要使用require无法生效const app new Vue({components: {App},render: h h(App)
});app.$mount(#app);
7、在根目录下新建一个名为build的文件夹在该文件夹内创建一个文件名为webpack.config.js的文件作为webpack配置文件代码如下const path require(path)
const VueLoaderPlugin require(vue-loader/lib/plugin)module.exports {entry: {client.bundle: ../entry-client.js,},output: {path: path.resolve(__dirname, ../dist), //生成文件放到dist目录下filename: [name].js},mode: development, //开发模式有错误vue会在控制台提示resolve: {//加了下面这项我们就能将import App from ./App.vue 省略为import App from ./Appextensions: [.js, .vue, .json]},//设置loader以及插件可参考vue-loader官网module: {rules: [{test: /.vue$/,loader: vue-loader},// 它会应用到普通的 .js 文件// 以及 .vue 文件中的 script 块{test: /.js$/,loader: babel-loader},// 它会应用到普通的 .css 文件// 以及 .vue 文件中的 style 块{test: /.css$/,use: [vue-style-loader,css-loader]}]},plugins: [// 请确保引入这个插件来保证vue-loader的使用new VueLoaderPlugin()]
};
8、命令行进入build文件夹输入命令webpack打包文件然后就可以在dist目录下看到生成的client.bundle.js目标文件了。9、在根目录下创建测试文件index.html添加代码如下!DOCTYPE html
html langen
headmeta charsetUTF-8titleTestVue/title
/head
body
div idapp
/div
/body
script typetext/javascript srcdist/client.bundle.js/script
/html
特点单文件组件模块化动态渲染典型的单页面应用
