模板语法

Vue模板语法有2大类：

1.插值语法：

功能：用于解析标签体内容。

写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

2.指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…..）。

举例：v-bind:href=”https://juejin.cn/post/xxx” 或简写为 :href=”https://juejin.cn/post/xxx”，xxx同样要写js表达式，

且可以直接读取到data中的所有属性。

备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>TryVue</title>
        <!--引入Vue-->
        <script type="text/javascript" src="https://juejin.cn/JS/vue.js"></script>
    </head>
    <body>

        <!--准备好一个容器-->
        <div id="root">
            <h1>插值语法</h1>
            <h3>hello,{{name}}</h3>
            <hr/>
            <h2>指令语法</h2>
            <a v-bind:href="https://juejin.cn/post/school.url">点我直接进入{{school.name}}</a>
            <a :href="https://juejin.cn/post/school.url">点我也直接进入二次元</a>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止vue在启动时生成生产提示

        new Vue({
            el:'#root',
            data:{
                name:'jark',
                school:{     //这里创建了一个二级数据
                    name:'二次元',
                    url:'http://www.bilibili.com'
                }
            }
        })
    
    </script>
</html>
复制代码

数据绑定

Vue中有2种数据绑定的方式：

1.单向绑定(v-bind)：数据只能从data流向页面。

2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

备注：

1.双向绑定一般都应用在表单类元素上（如：input、select等）

2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>TryVue</title>
        <!--引入Vue-->
        <script type="text/javascript" src="https://juejin.cn/JS/vue.js"></script>
    </head>
    <body>

        <!--准备好一个容器-->
        <div id="root">
            单向数据绑定：<input type="text" v-bind:value="name"><br> <!--页面的数据不会影响vue实例中的数据-->
            双向数据绑定：<input type="text" v-model:value="name"><!--页面的数据会影响vue实例中的数据！！！！-->
            <!--注意如下代码是错误的，因为v-model只能应用在表单类元素(输入类元素)中-->
            <!-- <h2 v-model:x="name">你好啊</h2> -->
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止vue在启动时生成生产提示

        new Vue({
            el:'#root',
            data:{
                name:'rua'
            }
        })
    
    </script>
</html>
复制代码

el和data的两种写法

//el的两种写法
        /* const v = new Vue({
            //el:'#root', //第一种写法
            data:{
                name:'尚硅谷'
            }
        })
        console.log(v)
        v.$mount('#root') //第二种写法 */

        //data的两种写法
        new Vue({
            el:'#root',
            //data的第一种写法：对象式
            /* data:{
                name:'rua'
            } */

            //data的第二种写法：函数式 写组件要用这个方式！！！！！
            //这个函数中的this为vue实例对象
            data(){
                return{
                    name:'rua'
                }
            }
        })
复制代码

其中 mount的意思是挂载

注意data第二种写法若使用箭头函数

data:()=>{
                return{
                    name:'rua'
                }
            }
复制代码

this为window，所以不能使用箭头函数！！！！

箭头函数:

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

详见地址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

一个重要的原则：

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

MVVM模型

MVVM模型:

M：模型(Model) ：data中的数据
1. V：视图(View) ：模板代码
  1. VM：视图模型(ViewModel)：Vue实例应用new vue()就是view model 所以接收这个变量时建议命名为 vm： 1.data中所有的属性，最后都出现在了vm身上。 2.vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接使用。

文章版权归作者所有，未经允许请勿转载。

THE END

代码人生