Vue.js learning notes from entry to practice (1) - Introduction to Vue.js grammar
1. Vue instance
In a page application using the Vue.js framework, at least one Vue instance must be created. The syntax is new Vue().
When creating a Vue instance, you need to pass in an option object, passed in (), ({...}), this object can contain data, methods, and component lifecycle hooks.
提示：实例可以赋值给变量，如：var vm = new vue({......})
Instance mount: Bind the view to be rendered through the el attribute, el： ‘#app’indicating that the instance is mounted in the previous HTML tag statement.
data：{...}Data object, put all the datavm.$mount("#app")The method manually mounts the Vue instance and returns the instance itself- el is mounted inside ()
$mountand mounted outside ()
var vm=new Vue({
...}).$mount("app")
2. Interpolation (data binding)
1. Binding in template text
For <html>the text value between the tags in , you need to call <script>the attribute value written in the instance in , using text interpolation, that is, Mustache syntax (double curly braces):<p>{
{message}}</p>
- If the value is a piece of HTML code, {
{HTML}} will not execute this piece of HTML code, it will just output it as it is (as the name implies, text interpolation, only pass the text in):
<p>{ {html}}</p> - Use the v-html command to output the result after executing the HTML statement:
<p v-html="html"></p>
2. Binding of HTML element attribute values
For the attribute value of an HTML element, that is, the attribute value of a label, for example <a href=?>{
{...}}</a>, { {}} cannot be used in ?,
and the v-bind instruction needs to be used to pass a value:
<a v-bind:href="url">{
{
...}}</a>`
Provides full JavaScript support for all data bindings, such as:
<p>{
{
message.tuUpperCase()}}</p> //tuUpperCase()会把传进来的文本变为全大写字母。
{
{
a+b}}
{
{
isLogin？username：‘not login’}}
{
{
message.split(' ').reverse().join('')}} //反转句子
<div v-bind:id="'list-' + id"></div>·
These expressions are first parsed as JavaScript in the data scope of the Vue instance.
Note: Each expression can only contain a single expression, not a statement or if statement, such as:
{
{
var a = 1}} //这是语句，不是表达式
{
{
if (OK) {
return message} }} //if语句也不会生效，可以用三元表达式来代替
3. Instructions
Directives are special attributes prefixed with v- whose value is restricted to a single expression (either a value, or JavaScript expressions are supported).
When<script> the attribute value in the Vue instance changes, <html>the attribute value of the tag bound to it in the Vue instance will also change accordingly.
1. Some common commands and usage:
v-if directive
<p v-if = "show">能看到吗</p> //v-if指令将根据show的值的真假来决定是否显示<p>的文本
Some commands can have parameters, indicated by a colon after the name, such as:
v-bind directive
<a v-bind:herf= "url"></a> //用于响应式地更新HTML属性
<a :herf= "url"></a> //简写
v-on directive
<button v-on:click="sayGreat"></button> //用于监听DOM事件
<button @click="sayGreat"></button> //简写
2. The parameters of the command can be dynamic parameters
Starting from Vue.js version 2.6.0, the parameters of the instruction can be dynamic parameters, and the syntax is instruction: [JavaScript expression], such as:
<a v-bind:[attribute]= "url"></a>
The attribute is evaluated dynamically as a JavaScript expression. Assuming that there is an object attribute in the Vue instance, the value is href, which is equivalent to v-bind:herf; if the value is null, the binding will be removed, which is equivalent to
<a></a>
注意1：在DOM中使用模板时（之间在HTML文件里写模板），需要避免使用大写字符命名动态参数，因为浏览器会把元素的属性名全部强制转换为小写。
也就是<html>里的动态参数名改成小写了，但是<script>里与之对应的名不会改成小写，就会找不到动态参数对应的数据对象。
注意2：动态参数不要使用复杂的表达式。因为HTML元素的属性命名有规范，不能有引号或空格。
错误示范：<a v-bind:['foo' + bar]= "value"></a>