Vue Einführung

Posted on  by admin

Chapter 1Chapter 2Chapter 3Chapter 4Chapter 5. I recently started working with Vue.js in a more deeper way. I figured out that it isn't that hard to get into it but will get harder after some time to get more insides into that area. I decided to write a series of Vue guides how you could possible handle certain things in your project.

I like the way I will describe to you but of course it is not the overall solution for healing the world. It just a best practice I figured out while working with Vue. I will always upload the code to this github repository. So now lets start with our first chapter. First of all we need to setup a simple Node project. I would recommend you to do this via command line by using the npm init command which will do a small wizard with you to create the package.json.

I removed some parts of the generated package.json and it finally looked like that:.

Welche Vorteile habe ich durch Vue.js?

Afterwards we would need to instal some Node modules for using Vue. The first one would be Vue itself. I will use webpack as my "compiler" and babel as a transpiler. Moreover we will need raw-loader to load html files via ES6 Modules. You should now have a node_modules folder and your package.json should look like that (the version strings could differ):. We will configure the webpack build through the webpack.config.js. For that we would need to create that file on the same level as the package.json.

First of all we need to define were the webpack should actually start "compiling". From my setup it should start from the file src/main.js. Now we need to tell webpack were to put the bundled file. I love to put that into a separated folder called bin and the filename would be build.js. Since webpack works with loaders we would need to define which we would like to use (we installed raw-loader and babel-loader). The babel-loader we use for our .js files and raw-loader for .html files. Now we need to define some alias to get Vue.js to work. The first one we need to import Vue.js in the correct and full version, the second one is to avoid later import path that could look like that: ./././common/button/button rather then doing app/components/common/button/button.

That's it for now with our webpack configuration. Luckily npm offers a script function were we could execute commands from our command line with out creating a bunch of weird looking bash scripts executing stuff from the deep of our node_modules folder. These scripts can be defined in our package.json. I created a script called build and one called build:js.

Done

The build script currently calls only the build:js script but will later get more calls.

The build:js executes webpack using our webpack.config.js. After configuring a bunch of stuff we now created some code to test the whole stuff and add another step to our build script. First of all we need to create a src folder as we configured in our webpack configuration.

Within that folder we add the index.html which should look like that:. The index.html includes our build.js generated by webpack. We need to copy that file over into the bin folder a well so I added another script called deploy:resources and called it in the build script (I installed npm-run-all via npm install --save-dev npm-run-all to ease the way of calling multiple npm scripts). That part I will not explain for now. You can simply copy over the code. I will go deeper into that topic in one of the next chapters.

File path: src/components/hello/hello.js. File path: src/components/hello/hello.html. This is not only our entry point for webpack but although our file for instantiating Vue. We need to tell Vue were to mount the app initially (render point in the DOM which is in our case the div with the id app). Finally we would need to tell Vue which component to render a startup.

Ready for More?

We you now run npm run build from your command line you should find a bin folder with a build.js and index.html. Open that index.html in your favourite web browser (e.g. Chrome or Firefox) and you should the "Hello World". I hope you like that way of describing the setup of a Vue project. I know there are a lot of different ways to do so (e.g.

not using webpack, using .vue files, ..) but I like the way using ES6 modules. If you have some feedback, feel free to add it and if you have questions, just ask them on Twitter or in the comment section.

  • I will try to answer as much as possible. You’re browsing the documentation for v2.x and earlier.
  • For v3.x, click here. Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces.
  • Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.
  • The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.

On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

If you’d like to learn more about Vue before diving in, we created a video walking through the core principles and a sample project.

$ vue create project-name

If you are an experienced frontend developer and want to know how Vue compares to other libraries/frameworks, check out the Comparison with Other Frameworks.

Composing with Components

The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back!

$ vue add [PLUGINNAME]

Prior experience with other frameworks helps, but is not required. The easiest way to try out Vue.js is using the Hello World example. Feel free to open it in another tab and follow along as we go through some basic examples. Or, you can create an index.html file and include Vue with:. The Installation page provides more options of installing Vue.

Note: We do not recommend that beginners start with vue-cli, especially if you are not yet familiar with Node.js-based build tools. If you prefer something more interactive, you can also check out this tutorial series on Scrimba, which gives you a mix of screencast and code playground that you can pause and play around with anytime. At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax:.

Some code

We have already created our very first Vue app! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now reactive. How do we know? Open your browser’s JavaScript console (right now, on this page) and set app.message to a different value. You should see the rendered example above update accordingly. Note that we no longer have to interact with the HTML directly. A Vue app attaches itself to a single DOM element (#app in our case) then fully controls it. The HTML is our entry point, but everything else happens within the newly created Vue instance.

In addition to text interpolation, we can also bind element attributes like this:.

Hover your mouse over me for a few seconds to see my dynamically bound title! Here we are encountering something new. The v-bind attribute you are seeing is called a directive.

The Webpack Configuration

Directives are prefixed with v- to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here, it is basically saying “keep this element’s title attribute up-to-date with the message property on the Vue instance.”. If you open up your JavaScript console again and enter app2.message = 'some new message', you’ll once again see that the bound HTML - in this case the title attribute - has been updated. It’s easy to toggle the presence of an element, too:. Go ahead and enter app3.seen = false in the console. You should see the message disappear. This example demonstrates that we can bind data to not only text and attributes, but also the structure of the DOM.

Vue 3

  • Moreover, Vue also provides a powerful transition effect system that can automatically apply transition effects when elements are inserted/updated/removed by Vue.