写代码啦
vue完整版和非完整版的区别和使用方法
回复数(0) 浏览数(40)
{{topic.upvote_count || 0}} 编辑 回复

安装@vue/cli

npm install -g @vue/cli
# 或
yarn global add @vue/cli
# 完成后检查版本
vue --version
# 创建一个名为hello-world的目录
vue create hello-world
#根据需要完成相应配置
# 进入目录
cd hello-world
# 开启webpack-dev-serve
yarn serve

完整版和非完整版的区别

  1. 特点:完整版 有compiler编译器,可以直接将html转移成Dom节点,在js中调用DOM节点对html内容直接进行操作
    非完整版 没有compiler编译器
    compiler占40%的体积
  2. 视图:vue完整版写在HTML里或者写在template选项里,而Vue非完整版则需要写在render函数里,用h来创建标签,h是vue创作者尤雨溪写给render的
  3. cdn引入: 在使用完整版时,引入在bootcnd官网搜索vue引入vue.js文件,如果使用vue非完整版,则同样的方法在HTML中引入vue.runtime.js 文件,如果文件是在生产环境则引入vue.runtime.js
  4. webpack引入:完整版需要配置alias、配置比较复杂,默认使用非完整版
  5. @vue/cli引入:完整版需要配置,默认使用非完整版

比如实现n+1的功能

对于完整版

在HTML中添加
```

{{n}}+1

在main.js中设置

new Vue({
el: "#app", //渲染到页面的位置
data: {
n: 0,
},
methods: {
add() {
this.n += 1;
},
},
});
```
即可实现从main.js 文件中对html操作

对于非完整版

在HTML重引入vue.runtime.min.js文件
<div id="app">{{n}}</div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0-beta.2/vue.runtime.min.js"></script>

创建一个Demo.vue
vue文件分成三部分:template(视图部分),script(数据,方法),sytle(样式)三部分

<template>
<div class="red">
{{n}}
<button @click="add">+1</button>
</div>
</template>
<script>
export default {
data() {
return {
n: 0,
};
},
methods: {
add() {
this.n += 1;
},
},
};
</script>>
<style scoped>
.red {
color: red;
}
</style>

main.js中引入Demo.vue 文件,并用render函数渲染
```
import Demo from "./Demo.vue";

//打印出来的这一部分就是把demo.vue中的template中的html容翻译成new Vue认识的语言
console.log(Demo.render.toString());

new Vue({
el: "#app", //渲染到页面的位置
render(h) {
return h(Demo);
},
})
```

Vue实例

Vue实例就如同jQuery实例,封装了DOM的所有操作,封装了data的所有操作。
然后就可以操作DOM了,就像监听事件,改变DOM,操作data,对data进行增删改查。
Vue实例没有封装ajax,需要使用axios的ajax功能。

template 和render的区别

如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项,或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板),就将需要加上编译器,即完整版:

// 需要编译器
new Vue({
template: '<div>{{ hi }}</div>'
})


// 不需要编译器
new Vue({
render (h) {
return h('div', this.hi)
}
})

当使用 vue-loader 或 vueify 的时候,*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的,所以只用运行时版本即可

使用codesandbox.io写Vue的代码:

注意:不要登录!不要登录!登录了限制次数。
进入官网,点击右上角的Create Sandbox,选择vue,进入界面,即可在线编辑实时预览。

如何将项目下载到本地:

点击左上角的File,选择Export to ZIP,再到本地目录里解压缩即可。

内容主要来源于饥人谷前端课程

{{topic.upvote_count || 0}}

安装@vue/cli

npm install -g @vue/cli
# 或
yarn global add @vue/cli
# 完成后检查版本
vue --version
# 创建一个名为hello-world的目录
vue create hello-world
#根据需要完成相应配置
# 进入目录
cd hello-world
# 开启webpack-dev-serve
yarn serve

完整版和非完整版的区别

  1. 特点:完整版 有compiler编译器,可以直接将html转移成Dom节点,在js中调用DOM节点对html内容直接进行操作
    非完整版 没有compiler编译器
    compiler占40%的体积
  2. 视图:vue完整版写在HTML里或者写在template选项里,而Vue非完整版则需要写在render函数里,用h来创建标签,h是vue创作者尤雨溪写给render的
  3. cdn引入: 在使用完整版时,引入在bootcnd官网搜索vue引入vue.js文件,如果使用vue非完整版,则同样的方法在HTML中引入vue.runtime.js 文件,如果文件是在生产环境则引入vue.runtime.js
  4. webpack引入:完整版需要配置alias、配置比较复杂,默认使用非完整版
  5. @vue/cli引入:完整版需要配置,默认使用非完整版

比如实现n+1的功能

对于完整版

在HTML中添加
```

{{n}}+1

在main.js中设置

new Vue({
el: "#app", //渲染到页面的位置
data: {
n: 0,
},
methods: {
add() {
this.n += 1;
},
},
});
```
即可实现从main.js 文件中对html操作

对于非完整版

在HTML重引入vue.runtime.min.js文件
<div id="app">{{n}}</div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0-beta.2/vue.runtime.min.js"></script>

创建一个Demo.vue
vue文件分成三部分:template(视图部分),script(数据,方法),sytle(样式)三部分

<template>
<div class="red">
{{n}}
<button @click="add">+1</button>
</div>
</template>
<script>
export default {
data() {
return {
n: 0,
};
},
methods: {
add() {
this.n += 1;
},
},
};
</script>>
<style scoped>
.red {
color: red;
}
</style>

main.js中引入Demo.vue 文件,并用render函数渲染
```
import Demo from "./Demo.vue";

//打印出来的这一部分就是把demo.vue中的template中的html容翻译成new Vue认识的语言
console.log(Demo.render.toString());

new Vue({
el: "#app", //渲染到页面的位置
render(h) {
return h(Demo);
},
})
```

Vue实例

Vue实例就如同jQuery实例,封装了DOM的所有操作,封装了data的所有操作。
然后就可以操作DOM了,就像监听事件,改变DOM,操作data,对data进行增删改查。
Vue实例没有封装ajax,需要使用axios的ajax功能。

template 和render的区别

如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项,或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板),就将需要加上编译器,即完整版:

// 需要编译器
new Vue({
template: '<div>{{ hi }}</div>'
})


// 不需要编译器
new Vue({
render (h) {
return h('div', this.hi)
}
})

当使用 vue-loader 或 vueify 的时候,*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的,所以只用运行时版本即可

使用codesandbox.io写Vue的代码:

注意:不要登录!不要登录!登录了限制次数。
进入官网,点击右上角的Create Sandbox,选择vue,进入界面,即可在线编辑实时预览。

如何将项目下载到本地:

点击左上角的File,选择Export to ZIP,再到本地目录里解压缩即可。

内容主要来源于饥人谷前端课程

40
回复 编辑