3.vue语法

最新推荐文章于 2023-08-01 11:30:28 发布
亦难猿
最新推荐文章于 2023-08-01 11:30:28 发布
阅读量788
点赞数
分类专栏： Vue 文章标签： vue
本文链接：https://blog.csdn.net/T_testView/article/details/112354462
版权
在一个使用vue框架的页面应用程序中，至少要创建一个Vue实例，语法为 new Vue(),vue实例充当了MVVM模式中的ViewModel。创建vue实例时，需要传入一个选项对象，该对象可以包含数据、方法、组件生命周期钩子等。

1.第一个实例
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!--引入Vue的包（可以官方下载）-->
    <script src="../JS/vue.js"></script>
    <title>第一个vue程序</title>
</head>
<body>
<!-- 将来new出来的vue实例会控制这个元素中的所有内容   这也是MVVM中的V-->
<div id="app">{
  { message }}</div>
<script>
    //创建一个Vue的实例
    // 当我们导入包之后，启动浏览器，然后在浏览器的内存中，就多了一个 Vue 构造函数
    //  注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
var  vm  = new Vue({
        el: '#app', // el表示，当前我们 new 的这个 Vue 实例，
        //要控制页面上的哪个区域(也就是数据要绑定页面上的哪个值)(也可以叫做挂载)
        // 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
        data: { // data 属性中，存放的是 el 中要用到的数据
        // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，
            message: 'Hello vue!'
            //程序员不再手动操作DOM元素了
            //【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
        }
    });
</script>
</body>
</html>

//另一种挂载方式：
var vm = new Vue({....}).$mount("#app");


2.插值：
{
  {message}} ->双花括号（也被叫做胡子语法） 用来表示文本插值
1.mustache 标签会替换为vue实例中数据对象上message属性的值。只要绑定的数据对象上
message属性发生了改变，插值处的内容就会被更新
2.mustache语法不能作用于HTML元素的属性上，要解决HTML元素属性值的绑定问题，
需要使用v-bind指令
3.mustache语法不能直接输出HTML元素，会将这些HTML元素当成文本输出出去，所以如果我
们真的想要输出HTML标签就需要使用V-html指令了
4.除了支持简单的绑定属性值外，对于所有的数据绑定，vue.js还提供了完全的
javascript表达式，所以我们还可以在mustache语法中使用表达式，如下：
{
  {a+b}}，{
  {isLogin?username:'not login'}},
{
  {message.split('').reverse().join('')}}，等。。。
5.插值表达式如果使用if()等语句或者是声明变量等，则不会生效，
会被当成字符串输出出去，如：{
  {var a =1}},{
  {if(ok){return message}}}


3.指令：
1.指令是带有v-前缀的特殊属性，其值限定为单个表达式。指令的作用是，
当表达式的值发生改变，将这个变化反映到DOM上。
2.在DOM中使用模板时（直接在一个HTML文件里编写模板），
还需要避免使用大写字符来命名动态参数，这是因为浏览器会把元素的属性名全部转换为
小写字符
3.在vue.js 2.6.0版本开始，指令的参数可以是动态参数，语法为指令:[js表达式]，如下：
    <a v-bind:[attribute]="url">新浪网</a> 这里的attribute
    会被当做一个JavaScript的表达式进行动态求值，求得的值将作为最终的参数来使用
    假设vue实例中有一个数据对象属性为attribute，其值为href，那么这个绑定将等价于
    v-bind：href。如果attribute的值计算为null，那么这个绑定值将会被移除，
    最后的渲染效果如下：
            <a>新浪网</a>


4.指令详解：
指令是带有v-前缀的特殊属性，其值限定为单个表达式。指令的作用是，当表达式的值发生改变时，将其产生的连带影响应用到DOM上
4.1.内置指令：

v-show：
v-show指令根据表达式的值的真假，来显示或者隐藏HTML元素。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>v-show</title>
</head>
<body>
<!--使用v-show时，我们可以看到元素本身是要被渲染出来的，
但是显示与否都是通过css样式属性display来控制的
，如果表达式的值计算为false，则样式会被设置为"display:none;",
如果计算出是true则不会。
-->
<div id="app">
    <h1 v-show="yes">yes！</h1>
    <h1 v-show="no">no！</h1>
    <!-- v-show中还可以使用js表达式来判断 -->
    <h1 v-show="age>25">age: {
  {age}}</h1>
</div>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            yes: true,
            no: false,
            age: 28
        }
    });
</script>
</body>
</html>



v-if / v-else-if / v-else:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>v-if、v-else-if、v-else</title>
</head>
<body>
<!--使用v-if、v-else-if、v-else这三个指令用于实现条件判断
v-if:和v-show效果相同，但是当我们打开控制台时，可以看到当表达式结果为false的时候，
我们可以看到结果为false的元素并没有生成
v-if和v-show的区别:
v-show是会渲染表达式结果为false的元素，只不过会将该元素的css样式设置为"display:none;"，
而v-if则不会生成相应元素
使用区别：v-if有更高的切换开销，而v-show有更高的初始渲染开销，因此，
如果需要非常频繁的切换元素，则使用v-show较好，如果在
运行时条件很少改变，则使用v-if较好

v-else-if、v-else：这两者都是和v-if一起使用的，可以实现互斥的条件判断

-->
<div id="app">
    <h1 v-if="yes">yes！</h1>
    <h1 v-if="no">no！</h1>
    <!-- v-if中也可以使用js表达式来判断 -->
    <h1  v-if="age>200">年龄是：{
  {age}}</h1>
    <h1 v-else="age>100">age: {
  {age}}</h1>
    <h1 v-else-if="age>50">年龄为：{
  {age}}</h1>

</div>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            yes: true,
            no: false,